Skip to content
New issue

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

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

Already on GitHub? # 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

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

No branches or pull requests

4 participants