Skip to content

Latest commit

 

History

History
35 lines (23 loc) · 2.59 KB

05_icons.md

File metadata and controls

35 lines (23 loc) · 2.59 KB
Raw

Icons

Here, you can find all about icons - where to get them, how to add them, etc.

Introduction

Source icon files are stored as svg files in custom-icons.

Icons as Vue components

Source svg files are converted to Vue components by our precompilation script. The resulting Vue components are made public via the icons definitions file lib/KIcon/iconDefinitions.js. The documentation website contains automatically generated list of available icons that can be used via Vue components, such as KIcon.

Icons for reStructuredText

In order to use icons on some Learning Equality's documentation pages written in reStructuredText, we also have a script to generate a set of reStructuredText replacement strings to docs/rstIconReplacements.txt which can be used in docs based on Sphinx. The file is available for download from https://design-system.learningequality.org/icons/#rst.

How to add a new icon

  1. Paste a svg file to custom-icons
  2. Run yarn run precompile-custom-svgs to generate a corresponding Vue component. The generated component will be saved to lib/KIcon/precompiled-icons/le
  3. Add a new entry for the generated component to the icons definitions file. As a key name, choose a unique alias that describes the purpose of the icon in our products well. Set the following attributes:
  • icon: A Vue component which renders the icon (generated in the previous step)
  • (optional) rtlFlip: When true, the icon will be flipped for right-to-left lanauges
  • (optional) defaultColor: A color for the icon. If not defined, icons are themeTokens.text colored
  • (optional) fixedColor: When true, the icon has a fixed color and KIcon's color prop will be ignored
  1. Run yarn run pregenerate to update icons for reStructuredText documents. Note that it's important to run this step after updating the icons definitions file, otherwise it won't be detected.

To check that the new icon is successfully added:

How to update an existing icon

The update process is similar to creating a new icon. After every update, run yarn run precompile-custom-svgs and yarn run pregenerate.