# Icons

Icons are defined in SVG format and are automatically built by a build script to ensure they remain consistent.

### Directories

- `svg`: All source SVG icon files are placed here. The build process uses the files in this directory to create components.
- `src/*`: Built artifacts are placed into this directory.

### Building Icons

All icons should be exported as SVG and placed in the `svg` directory. They do not need to be optimized beforehand, the build process will optimize them and convert them to components.

When adding new icons run the build script below to output the optimized React-component versions.

`yarn workspace @looker/icons build`

Adding new icons to `svg` and failing to re-run the command above will result in a lint failure.

### Naming Icons

When adding a new icon, the name given to the icon should aim to be a succinct and semantic representation of the icon's use, not its artwork. For example, `Warning` not `Triangle With Exclamation Point`. While this rule can be broken in some cases, it is the recommended way to name icons as well as something that will be reviewed when submitting new icons.