@temporg/ui-icons
v99.10.0
Published
Icon set for Rock Content. products
Downloads
496
Readme
category: packages
ui-icons
Installation
yarn add @temporg/ui-icons
Usage
To use the React components:
import { IconAddLine } from '@temporg/ui-icons'
const MyComponent = () => {
return <IconAdd />
}
Adding and Modifying Icons
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
andLine/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 runningcurl -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
Guidelines for Drawing Icons
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.