I'm working on a project that has svg fonts (we use icomoon svg generator). Each icon has its unicode and we use them like this:
@font-face {
font-family: 'custom-font';
src: url('url/icons.eot');
src: url('url/icons.eot') format("embedded-opentype"), url('url/icons.woff') format("woff"), url('url/icons.ttf') format("truetype"), url('url/icons.svg') format("svg");
font-weight: normal;
font-style: normal;
}
//example
div:before {
content: '\e801'; //chevron arrow
font-family: 'custom-font';
font-size: 18px;
}
This is nice and a good practice. But my problem is that I work with a lot of devs (different branches), imagine each dev needs to add new icons (must update the icon.svg file). So when a .svg is generated with icomoon the content, in this case '\e801', can change. This breaks the css showing other icon or not showing them at all.
My question: Is there a centralised way to have these kind of resources? I imagine adding new svg icons without changing the content of previous icons no matter the branch/icons.svg file we're working on. I can't use sprites or svg files for each icon, it is not performant.
Patrick Müller
Fullstack Developer
First of all you using a (generated) icon font not the svg's directly. There are a lot of pros to use svg (https://css-tricks.com/icon-fonts-vs-svg/) over a icon font.
But for your question: I would say, generate icon classes like
.icon-chevron:before { content: '\e801'; ... }and then use this class in your markup
<div class="icon-chevron">And if its about the unicode directly, just make sure that the same svg gets always the same unicode by generation.