Fizz Icons

An icon library for Fizz.

Updating Icons

1. Add a new file named for the icon to _src/assets/icons folder.
2. Copy and paste the SVG code from the Figma icon into the new file and remove any g, defs, and rect tags as well as the xlmns url, and any width, height, and fill attributes. Also make sure there is a viewBox="0 0 24 24" on the svg. This will generate the name into the array in _src/_data/icons.json. You can further optimize the SVG with SVGOMG.
3. Bump the version in package.json and run pnpm run build:icons from the root of the monorepo to generate the new icon files.
4. Publish the new version of the icon package to NPM by running pnpm run pub:icons from the root of the monorepo.
5. Update the icon package in the styles package by running pnpm up --filter @getprovi/fizz @getprovi/fizz-icons from the root of the monorepo. This can also be accomplished by changing the version in the styles package's package.json and running pnpm i from the root of the monorepo.

Usage

The icons are generated by using a shortcode in eleventy.js and a template in layouts. The shortcode takes the name of the icon and the class name. The template uses the name to pull the svg from the sprite.svg file.

• .eleventy.js has shortcode for svg
• base.html in src/_includes/layouts has an svg template that pulls in the sprite.svg file generated by the eleventy-plugin-svg-sprite plugin in the icon package.

  <div hidden>
    {% include '../../../node_modules/@getprovi/fizz-icons/_src/assets/sprite.svg' %}
  </div>

• The iconlist.js in src/_data runs a function that looks for all the icons in the fizz-icons package and generates an array of icon names.
• The icons page in src/pages uses the shortcode to generate the icons

  {% for svg in iconlist %}
  <li class="fizz-text-center">
    {% icon svg, "fizz-icon-32 fizz-margin-auto fizz-stack-4" %}
    <span>{{ svg }}</span>
  </li>
  {% endfor %}