Use styleable SVGs for the print/close icons

[dflock]

This would enable you to change the color of the icons in your styles - for example, when creating a dark theme.

Currently if you create a dark theme, the print icon will become invisible against the dark background.

[ZachSaucier]

Hello dflock, thanks for the useful contribution! I originally thought about this for the closing X button (you can style this using color and border of .simple-close) but didn't when I added the print functionality.

I just changed the background image from a PNG to an SVG obtained from this page. You can style it using the .simple-print class. To change the outline color, you can use CSS's filter functions, e.x. -webkit-filter: invert(100%); to make it white.

I realize that this isn't very freeing in terms of styling, but I don't believe that it needs to be. Leaving it as a background image allows me to change it more easily later and keeps the markup-style separation.

Let me know if this works for you!

Check below for an update

[ZachSaucier]

Update:

I have now inlined the print SVG icon because I needed to implement the functionality for a potential new feature. The new changes (available in a56b275 / 0.0.31) are as follows:

• A .simple-control class has been added to the print and close buttons
• The print icon can be styled using the fill property and, for desired thickness, the stroke property of .simple-print
• All .simple-controls by default use a change in opacity on hover, not color. This, as with all styling in the extension, can be changed if desired

I hope that allow more freedom!

Note that you can hide these buttons by applying display: none; to them in the CSS.

---

Update 2:

There are now .simple-edit-theme (which edits the default theme) and .simple-edit buttons (which edits the author/date/title) which you can style using fill and stroke as well.

---

Update 3:

The Premium version also now has .simple-share as well as other elements. See this post for more info.