Skip to content

Commit 4e5dd4a

Browse files
committed
feat(ui-icons): wip: compare icon
1 parent d140fe3 commit 4e5dd4a

File tree

3 files changed

+14
-11
lines changed

3 files changed

+14
-11
lines changed

docs/contributor-docs/adding-icons.md

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,7 @@ order: 9
77
## Adding and Modifying Icons
88

99
- Use dashes in the name of the .svg files (e.g `calendar-month`).
10-
Use the same name for the "line" and "solid" variants, and save them in the respective folder, e.g. `Solid/calendar-month` and `Line/calendar-month`.
11-
12-
- Copy the new icon files in the `/svg/Solid` and `/svg/Line` directories.
13-
10+
- Use the same name for the "Line" and "Solid" variants, and save them in the respective folder, e.g. `instructure-ui/packages/ui-icons/svg/Line/calendar-month.svg` and `instructure-ui/packages/ui-icons/svg/Solid/calendar-month.svg`.
1411
- Double-check that the SVG size is 1920x1920.
1512

1613
```js
@@ -65,15 +62,11 @@ type: code
6562
</svg>
6663
```
6764

68-
- If the icon has to bidirectional (being mirrored in RTL mode, typically arrow icons), add the icon name to the bidirectional list in `packages/ui-icons/icons.config.js`. Deprecated icons are handled here as well.
69-
70-
- Run `npm run export:icons` from the repository root directory to generate the icons. This script will also take care of further optimizations on the SVG files (e.g. removing the `fill`s). The configs for this are located in `packages/ui-icons-build/lib/tasks/optimize-svgs/index.js` and `packages/ui-icons/svgo.config.js`.
71-
72-
- Run `npm install && npm run bootstrap`.
65+
- If the icon has to be bidirectional (being mirrored in RTL mode, typically arrow icons), add the icon name to the bidirectional list in `packages/ui-icons/icons.config.js`. Deprecated icons are handled here as well.
7366

74-
- Finally, run `npm run dev` from the repository root directory to start the local server and check the generated output.
67+
- Run `npm run bootstrap`.
7568

76-
- Verify icons display correctly by checking under [Icons](/#icons) in the main nav. Check all 3 versions (React, SVG and icon font).
69+
- Finally, run `npm run dev` and verify that the icons are displayed correctly under [Icons](/#icons). Check all 3 versions (React, SVG and icon font).
7770

7871
(Note: The fonts are sometimes not rendered correctly, but we decided not to fix them, because they are not really used anywhere, and we might stop supporting icon fonts in the future in general.)
7972

Lines changed: 6 additions & 0 deletions
Loading
Lines changed: 4 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)