Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Missing SVG icon for 'code' toolbar format #998

Closed
marktron opened this issue Sep 22, 2016 · 5 comments
Closed

Missing SVG icon for 'code' toolbar format #998

marktron opened this issue Sep 22, 2016 · 5 comments

Comments

@marktron
Copy link
Contributor

As seen on http://codepen.io/anon/pen/wzgYqX, the 'code' format does not have an SVG icon. It does properly format the text, and there is also a 'code-block' icon for block level formatting.

@jhchen
Copy link
Member

jhchen commented Sep 26, 2016

Do you think the code and code-block icons should look differently? @jackmu95 's PR uses the same for both and is mergeable if the use case is met.

@marktron
Copy link
Contributor Author

Ideally they would be two different icons since they do different things (apply block level formatting vs inline formatting), but I recognize it's difficult to convey that clearly with two versions of a very similar icon.

@jacobmllr95
Copy link
Contributor

@jhchen This commit is just a quick fix for the missing icon. Better two times the same icon as no icon ;)

In general it would be good if there are two different icons for 'code' and 'code-block'.

@jhchen
Copy link
Member

jhchen commented Sep 27, 2016

Yes I think different icons will be difficult so let's go with this for now.

@webmatth
Copy link

webmatth commented Apr 27, 2020

code-block.zip

Hi I've made a different icon for code-block (inspired from slack code-block icon)
for now i'm using it like this:
const icons = Quill.import('ui/icons'); icons['code-block'] = '<svg viewbox="0 -2 15 18">\n' + '\t<polyline class="ql-even ql-stroke" points="2.48 2.48 1 3.96 2.48 5.45"/>\n' + '\t<polyline class="ql-even ql-stroke" points="8.41 2.48 9.9 3.96 8.41 5.45"/>\n' + '\t<line class="ql-stroke" x1="6.19" y1="1" x2="4.71" y2="6.93"/>\n' + '\t<polyline class="ql-stroke" points="12.84 3 14 3 14 13 2 13 2 8.43"/>\n' + '</svg>';
Hope it helps!

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants