Sign in
Log inSign up

Centralised SVG font resource?

Adrián Escat's photo
Adrián Escat
·Jul 7, 2016

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?#iefix') format("embedded-opentype"), url('url/icons.woff') format("woff"), url('url/icons.ttf') format("truetype"), url('url/icons.svg?#icons') 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.

3