Skip to content
Home

Icons Library

Icons are getting added (more or less) automatically by extracting them from Figma Icons Library.

What is the icons flow?

  1. Icons are fetched as SVG files from an API.
  2. The information about the new icons are stored in two data files:
    • icons-svg.lock contains API information, so we are able to compare it next time the API is called.
    • icons-meta.json contains additional information such as the category it belongs to.
  3. They are then optimized with SVGO and stored in /assets/icons/. Each size in a different SVG.
  4. During build (yarn build) the SVG files get converted to JSX based React components and stored in /src/icons. Also several index files and fallbacks are automatically generated.

How to sync new icons?

To fetch new icons from the Figma Icons Library file, you have to:

  1. Re-branch main, and name it icons/{your-branch-name} (it needs to include icons in the name):

    git pull origin main
    git checkout -b icons/{your-branch-name} && git push -u origin

  2. After the CI/CD process has finished it should have made a commit back to the branch including the new optimized icons.

  3. With that commit, make a PR back to main, review, and (squash) merge it.

Notes:

  • The PR or commit needs a appropriate title e.g. feat(Icons): add [icon names] or fix(Icon): fix cropped [icon name]. You can either give the commit a good title during the squash merge of the PR or you may pull and rebase interactive git pull && git rebase -i or amend.
  • Depending on the situation, you may have to pull the changes down locally, and run all tests, to eventually update broken visual snapshots. But ideally, all of that should be handled during the CI/CD process.

How to fix icons?

If you need to re-fetch one or several icons that got updated or changed in the Figma Icons Library you can force the icons to get re-processed before the cache timeout of 30 days:

  1. Find the icon in the icons-svg.lock file and change the updated field to 0.
  2. Commit the change – but ensure the git branch name starts with icon/ (more details above).
  3. You may consider to run yarn workspace @dnb/eufemia figma:reset – it will delete everything and refetch the icons.

How to convert icons only?

During development of the conversion script convertSvgToJsx you may consider to run yarn workspace @dnb/eufemia dev:icons. Its the same process, when calling yarn build. It will convert SVGs to JSXs and create all the needed index files in watch mode.

Icons CI/CD process description

This is a description of what happens during adding new icons to the icons library.

Icons are getting added (more or less) automatically by extracting them from Figma. Following is how the process is tied together.

  1. The connection happens on CI.
  2. Checks if a new Figma Icons library version is available.
  3. Download the Figma file (JSON) by a stream basis, and cache that.
  4. Store the new version, in a version file.
  5. Parse the JSON Figma file for valid icon IDs.
  6. For PDF only: unpack the existing zip file with icons.
  7. Checks if an icon file (SVG or PDF) exists in the repo.
  8. If no, download it.
  9. Details about the icon file are getting stored in a "lock" file, so we can compare it next time against.
  10. For PDF only: pack the icon files to a zip (tar) and delete the files.
  11. For SVG only: store a meta data file, so the portal can display more relevant data about the icons.
  12. For SVG only: optimize the SVG file for a lower size.
  13. For SVG only: Create a JSX component.
  14. For SVG only: run integration and visual tests.
  15. Commit the extracted / generated files back to the repo.

Access denied

If you get an access denied request from the Figma API – while streaming down by the GET image endpoint, you may reset the URLs from inside the icons.lock file by running this command: yarn figma:reset and commit the re-generated files. Image URL's expires after 30 days.