SVG icons for use with the Fishtank Design System.
npm install @fishtank/icons
If your project depends on
@fishtank/icons, you'll be able to refer to the contents of the
icons directory. How you'll do this will depend on your choice of build system or deployment mechanism. At this point, our adopters on using Webpack. If you are using something else, please let us know and we'll update this accordingly.
If you are working with Vue JS, we have built @fishtank/icons-vue, a Vue Component that renders our SVG shapes.
Note that external sprites cannot be used with CDNs or asset hosts due to cross-origin restrictions.
SVG vs. Font Icons
Early on, we decided in favor of using SVG sprites instead of font icons for our design system. To summarize the key points:
- SVGs are now well supported across our target browsers (sometimes with minor polyfills).
- Font icons have a number of accessibility issues.
- Font icons will fail with no fallback when font downloads are restricted (as we've seen at a number of government agencies).
More information here: Seriously Don't Use Icon Fonts
We support two different icon sizes: 24px and 32px. Although SVG allows our icons to be infinitely scalable, the icons have been designed to be crisp and not have sub-pixels at those sizes (or integer multiples thereof).
In the future, we may figure out a way to make the icons responsive to the size they're used in.
When dealing with icon accessibility, we follow the advice in this article: Hiding inline SVG icons from screen readers
Many, probably the majority, of articles explaining how to use inline SVG for icons describe multiple ways of ensuring that your SVG graphics have a text alternative. That can be appropriate, but most of the time, at least in my experience, you just want an icon as an added visual cue alongside some text. Just like adding an image via the background-image CSS property. And icons of that kind should not have any text alternative since for a screen reader user that will just duplicate the information already available in plain text.
- We strip
titleelements from the SVGs before packaging them.
- We recommend that anyone using our icons
- add accessible descriptive text to the context that our icons are being used in
Currently, we use SVGO's default optimization settings, but we're open to suggestions.