JSPM – @instructure/ui-icons@7.3.4

category: packages

yarn add @instructure/ui-icons

To use the React components:

import { IconAddLine } from '@instructure/ui-icons'

const MyComponent = () => {
  return <IconAdd />
}

Start with the Sketch template. Open the template file and then save it as a template (File > Save as Template...). The next time you want to make an icon it will be available in your template list (File > New From Template) in the Sketch app.
Use dashes in the name of the .sketch files (e.g calendar-month). Use the same name for art-boards, but prefix with the variant, e.g. Solid/calendar-month and Line/calendar-month.
Save new icon files in the /src directory.
Run yarn export:icons from the repository root directory to generate the SVG files. Troubleshooting: if sketchtool is not installed do so by running curl -L https://raw.githubusercontent.com/cognitom/gulp-sketch/master/install-sketchtool.sh | sudo sh
Verify that the art-boards are exported as SVG to the /svg directory. There should be directories for each variant based on the art-board names (Line and Solid).
To ensure everything rebuilds correctly run yarn && yarn bootstrap.
Finally run yarn dev from the repository root directory to start the local server and check the generated output.
Verify icons display correctly by checking under iconography in the main nav

Draw your icons on the 1920 x 1920 art-boards that are set up for you in the template.
Before you flatten shapes or vectorize strokes as described below, make a hidden copy of the original paths off to the side so that you can more easily come back and make changes later.
Flatten your shapes (Layer > Paths > Flatten).
Export strokes to vector (Layer > Convert to Outlines).
Don’t use borders on vectors, especially not inside/outside borders which aren’t supported in SVG. Do not use clipping paths as that will have adverse affects when converting sketch to SVG.
Make sure none of the paths go outside of the art-board. If so, the glyph in the icon font will be misaligned. Draw inside the lines.
Fill the space edge-to-edge as much as possible. The build process will add margins as needed.