How would you make svg icons in a project?

Hi all. Make the project and the layout is here are the icons
5e7ef2e423c01818346095.png

Previously always made the icons using icomoon, convenient sizes, and colors everything can be changed without any problem (talking about hover and focus). Here as you can see the same icon has several colors and even gradients there. Naschel option that is not less popular - add them as svg symbols and use via id
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
<symbol id="icon" fill="none" viewBox="0 0 22 22">
<!-- the code icons -->
</symbol>
</svg>


and then her call so
<svg>
<use xlink:href="#icon">
</svg>


Correspondingly, the color can be set using css variables --color: red

But here I faced problems:
1) if you specify the display: none from the gradient svg icons only show the part that they have filled with color and gradient parts are not seen stupidly - decided to just wrap it in a div which is done with a size of 1px on 1px and visibility hidden (vserovno crooked a decision)
2) is it possible somehow to transfer the color icon to change the gradient? if I say you need to change it on hover

Perhaps there are some more elegant solutions, but I don't know
April 9th 20 at 10:38
2 answers
April 9th 20 at 10:40
Solution
We insert icons in the layout, without attaching third-party file, as does, for example, github: https://github.blog/2016-02-22-delivering-octicons...

Posthtml here for such a plugin is: https://github.com/andrey-hohlov/posthtml-inline-svg

About gradients here well painted https://fvsch.com/svg-gradient-fill/ I like the option with fill: url... in css.
April 9th 20 at 10:42
All right, using symbolic links to insert icons most convenient. But make sure that the id of the gradients and other elements do not overlap with others. Otherwise you'll get strange things. But the root of your problem comes from the fill="none", which says - "do not pour", and the gradient is added through the fill.
If fill is none to remove the problem is and icons type solid zvete (stars for example) have a black fill. And what about the different ID of the gradients should be checked. - manley_Da commented on April 9th 20 at 10:45

Find more questions by tags HTMLLayoutSVG