Comments on: How I Made an Icon System Out of CSS Custom Properties https://css-tricks.com/how-i-made-an-icon-system-out-of-css-custom-properties/ Tips, Tricks, and Techniques on using Cascading Style Sheets. Thu, 29 Sep 2022 13:58:41 +0000 hourly 1 https://wordpress.org/?v=6.5.5 By: Scott Rod https://css-tricks.com/how-i-made-an-icon-system-out-of-css-custom-properties/#comment-1797259 Thu, 29 Sep 2022 13:58:41 +0000 https://css-tricks.com/?p=373111#comment-1797259 In reply to Mike Gillett.

Been using mask as well, and over clip path because it will resize properly. However, there’s probably downsides as well.

]]> By: Mat https://css-tricks.com/how-i-made-an-icon-system-out-of-css-custom-properties/#comment-1797231 Tue, 27 Sep 2022 21:41:24 +0000 https://css-tricks.com/?p=373111#comment-1797231 I prefer using:

clip-path: path('your-svg-path-here');

No need for XML…

]]> By: zdrowersi https://css-tricks.com/how-i-made-an-icon-system-out-of-css-custom-properties/#comment-1797214 Mon, 26 Sep 2022 20:44:21 +0000 https://css-tricks.com/?p=373111#comment-1797214 Interesting.
Thank you, Louis!
Z.

]]> By: Mike Gillett https://css-tricks.com/how-i-made-an-icon-system-out-of-css-custom-properties/#comment-1797209 Mon, 26 Sep 2022 08:44:09 +0000 https://css-tricks.com/?p=373111#comment-1797209 If you used the SVG as an image-mask you could use the element background for all your colouring needs. Makes hover states and site themes a lot easier :)

]]> By: jacky https://css-tricks.com/how-i-made-an-icon-system-out-of-css-custom-properties/#comment-1797195 Fri, 23 Sep 2022 16:28:29 +0000 https://css-tricks.com/?p=373111#comment-1797195 very good

]]> By: Christopher Kirk-Nielsen https://css-tricks.com/how-i-made-an-icon-system-out-of-css-custom-properties/#comment-1797187 Thu, 22 Sep 2022 17:15:16 +0000 https://css-tricks.com/?p=373111#comment-1797187 I like this approach, it’s pretty versatile and organised. You could even have a build step pull in a bunch of SVGs and compile them into a Sass file.

For the custom colours, I usually approach it as a masked element with the background set to currentColor: https://codepen.io/chriskirknielsen/pen/jOxGObq

A little more brittle but I think it should do the trick in most cases.

]]>