Vocabulary: SVG icons pack for Fonts

[dhruvkb]

Problem

Font icons are not great. SVG icons are.

Description

Present situation: Icon packed into a font are not great.

• There are many icons now, all but a couple of which are just subsetted from Font Awesome
• News icons are added all the time and the process is not friendly for contributors
• Since every new icon is a font-rebuild, it takes time and kills the possibility of caching
• The process can not be automated at all at any stage and that's no fun for any of us
• Many sites use these icons, none use the full set but have to download the entire font file as a whole
• Each icon is mapped to a rather arbitrary code-point

Suggested solution: We replace the icon font with an SVG collection

• They are light weight and scalable and offer all the benefits of styling with CSS like a regular font
• They can be subsetted by the app that uses Vocabulary and then minified by the respective bundlers
• They can be directly loaded into the collection with copy-paste, no need for long builds
• They are smaller than fonts in size
• They can be cached
• They can have semantic meaningful names

Implementation

• [ ] I would be interested in implementing this feature.

[dhruvkb]

This also resolves the problem of choosing arbitrary code points as seen in #657.

[zackkrida]

This also resolves the problem of choosing arbitrary code points as seen in #657.

Yes, the icon font is very tedious and lots of room for user error. I'm 100% for switching to svgs. Some thoughts on the actual implementation:

• We freeze the existing icon font as-is, and continue to support it for a few more months / versions. No new icons will be added. I suppose we could technically support it indefinitely so old projects do not break.
  
  
  
  • We add a deprecation notice to the https://cc-fonts.netlify.app/?path=/docs/vocabulary-icons--page page and make a new icons page for our svg icons
  
  
• Add a new svg icons page with an icon preview component that has an easy to use copy source functionality (see: https://heroicons.com/) and perhaps a download button as well.
• Every added svg should be optimized with svgomg and must have a viewBox property.
• Document the use of svgs within vocabulary, i.e., inline svgs should be wrapped in <span class="icon"></span>
• We can remove our custom '.icon' class and styles!

As for the @creativecommons/fonts npm package, it can continue to be a package for importing .svg files and fonts. Example usage:

import ChevronUp from '@creativecommons/fonts/svg/chevron-up.svg?inline'

We can document recommendations for webpack loaders and things like that which support svgs.

[dhruvkb]

We can also make @creativecommons/fonts tree-shakeable so that only the icons that a particular site needs are present in the bundle.

[rochisha0]

I'd like to work on this issue. @dhruvkb , can you please elaborate on how this should be done?

[dhruvkb]

To start with, I'd recommend pulling in a copy of Font Awesome SVGs from their site and copying over the relevant glyphs into fonts/src/assets/svg.

[Deepak-du]

I'd like to work on this issue