From a Slack conversation:
@matt-yorkley you seem to know how to create a new version of OFN-v2.svg, is that the file we need to update if we want to add a new icon to the app? is there any documentation on how to do this?
[Matt] Is that the font file? I think I used some sort of online font-editing tool. It was an annoying task and my memory of it is pretty hazy. Do we need to always add new icons to the existing font file, or can we just have them as separate svg files?
[Luis Ramos] I think it’s faster/more optimized to have them in the fonts file, isnt it? but harder to add new icons… if we have some explanation of how to do it, should be straight forward.
[Pau Perez] if we need to touch that file, I would really want to revisit why we can’t rely on Rails’ asset’s digest and leverage HTTP caching. It feels to me that browser request that file every single time but I don’t have proof yet. I think it’s the right timing
[Luis Ramos] I cant remember the details but I think it’'s faster to have all images in one file instead of many, it’s not a network thing, it’s a rendering thing on the browser.
[Maikel Linke] Laura created that font file with Icomoon years ago. She left us this file: Icomoon OFN font selection.json · GitHub She said that it’s important to use Icomoon with the Json file because otherwise some offsets are lost and symbols appear slightly higher or lower than they should do. I never touched it and I would like a more developer-friendly way of adding and removing symbols. Ideally, a rails-assets plugin would put them all in one file if that’s better for the browser. But I don’t think that it’s so important because other big players are not using that technique. Slack uses <img src=""/> for emoticons and Google uses inline <svg> tags for common symbols. I reckon that the new modern and future proof way are SVGs. I wouldn’t bother with the old font file.
[Luis Ramos] ah, awesome Maikel, thanks for the explanation! Looks like we just need to agree on a convention and on a clean up plan
We have 71 icons in the font file right now? I dont know how many are being used in the app…
I put OFN-v2.svg on IcoMoon App - Icon Font, SVG, PDF & PNG Generator
A proposal could look like this:
- Make OFN font file deprecated: /public/OFN-v2.svg - at some point, we can track the used icons, migrate them to svg and delete the file. I am assuming there are only icons and nothing else in these OFN font files, correct?
- All icons should be svgs added directly to app/assets
- Create new folder /app/assets/icons and move all icons there (so we can have app images in appp/assets/images separated from icons)
Then, a two options:
A - use SVGs in app/assets/icons directly in css like this url("/assets/flag.svg")
B - use some rails assets pipleline plugin to get these svgs into a single file (needs investigation)
Thoughts?
