I'd like to propose two changes to this repository (the first unblocks the second):
1. Add a view box to all SVG icons
We need to add a view box to all svg icons listed here. Figma automatically adds this view box on import, but it would be ideal if they were included in the source icon svgs. Currently, only the lavatory icon correctly includes a view box. The following would be added to the root svg tag for all svgs in the /icons folder (but not its subfolders):
width="24" height="24" viewBox="0 0 24 24"
This would allow them to be correctly sized when imported into an icon font.
2. Add an icon font
For iOS + Android, iconography is easiest/best when done via SVGs embedded in an icon font. They are the easiest to use because SVG support is not inherently supported by iOS or Android without external libraries (i.e. Skia). However, fonts are supported - which are of course dictionaries of SVGs. Where Skia shines for SVGs of seat maps - large complex SVGs with full color - it is too heavy weight for consistent and easy application of monochromatic iconography.
Furthermore, these icons have an expectation to grow with text accessibility changes and be read aloud. Using an icon font, these icons will be accessible (i.e. read aloud) by the name given in the file (e.g., lavatory, hotel-stroke, etc.). By using an icon font, icons will grow with text accessibility, preserving the aspect size relative to the ASCircular font text beside it - with no additional work by the iOS or Android developers. Last but not least, they are theme able the same way text is - with no additional work on the iOS or Android developer side.
Current state
The iOS + Android apps today have to ship multiple sizes (1x, 2x, 3x) of PNGs in place of icons today - that is the platform supported way to handle images. While the relatively few number of non-icon images make that achievable, it is burdensome for iconography itself. The developers must also use special image processing libraries in iOS + Android to resize + recolor (sometimes not perfectly) the icon images. They don't automatically scale with accessibility or re-color on theme changes (the way text can).
The Hawaiian Airlines team found that using an icon font overcame these issues and made development especially fast or easy. We'd like to do the same here.
Proposed implementation for 1.
For number 1, all existing icons would be updated via PR to include the viewbox properties that are required. The change would be permanent and should not have any adverse affect on the way the repository builds an svg collection for web.
Proposed implementation for 2.
Since we don't want to manually edit an icon font for every new SVG, we propose using the command line tool font custom (which internally uses libraries for font forge, which IS the manual tool for editing fonts). Font custom will allow us to feed the svg icons repository and generate as follows:
fontcustom compile icons --autowidth
Less than 5 seconds later, we could have an alaska-icons.ttf with an alaska-icons-preview.html showcasing the name of each icon in the font (developers would need to only know the name, not the dictionary key value [a hex code]).
Use in Figma?
Even better, if desired, this icon font can be imported into Figma (we tried it out using the material.io icon font). This icon font displays in Figma the name of the icon to the developer as well as respects theme boxes + resizing identically with text; it could possibly be an easier way to add new iconography where even Figma is fed directly from this repo's built icon font.
I'd like to propose two changes to this repository (the first unblocks the second):
1. Add a view box to all SVG icons
We need to add a view box to all svg icons listed here. Figma automatically adds this view box on import, but it would be ideal if they were included in the source icon svgs. Currently, only the lavatory icon correctly includes a view box. The following would be added to the root svg tag for all svgs in the /icons folder (but not its subfolders):
This would allow them to be correctly sized when imported into an icon font.
2. Add an icon font
For iOS + Android, iconography is easiest/best when done via SVGs embedded in an icon font. They are the easiest to use because SVG support is not inherently supported by iOS or Android without external libraries (i.e. Skia). However, fonts are supported - which are of course dictionaries of SVGs. Where Skia shines for SVGs of seat maps - large complex SVGs with full color - it is too heavy weight for consistent and easy application of monochromatic iconography.
Furthermore, these icons have an expectation to grow with text accessibility changes and be read aloud. Using an icon font, these icons will be accessible (i.e. read aloud) by the name given in the file (e.g., lavatory, hotel-stroke, etc.). By using an icon font, icons will grow with text accessibility, preserving the aspect size relative to the ASCircular font text beside it - with no additional work by the iOS or Android developers. Last but not least, they are theme able the same way text is - with no additional work on the iOS or Android developer side.
Current state
The iOS + Android apps today have to ship multiple sizes (1x, 2x, 3x) of PNGs in place of icons today - that is the platform supported way to handle images. While the relatively few number of non-icon images make that achievable, it is burdensome for iconography itself. The developers must also use special image processing libraries in iOS + Android to resize + recolor (sometimes not perfectly) the icon images. They don't automatically scale with accessibility or re-color on theme changes (the way text can).
The Hawaiian Airlines team found that using an icon font overcame these issues and made development especially fast or easy. We'd like to do the same here.
Proposed implementation for 1.
For number 1, all existing icons would be updated via PR to include the viewbox properties that are required. The change would be permanent and should not have any adverse affect on the way the repository builds an svg collection for web.
Proposed implementation for 2.
Since we don't want to manually edit an icon font for every new SVG, we propose using the command line tool font custom (which internally uses libraries for font forge, which IS the manual tool for editing fonts). Font custom will allow us to feed the svg icons repository and generate as follows:
Less than 5 seconds later, we could have an alaska-icons.ttf with an alaska-icons-preview.html showcasing the name of each icon in the font (developers would need to only know the name, not the dictionary key value [a hex code]).
Use in Figma?
Even better, if desired, this icon font can be imported into Figma (we tried it out using the material.io icon font). This icon font displays in Figma the name of the icon to the developer as well as respects theme boxes + resizing identically with text; it could possibly be an easier way to add new iconography where even Figma is fed directly from this repo's built icon font.