Skip to content

Commit bf6a8bf

Browse files
committed
fix: Update readme with directory namespacing
1 parent 8aca974 commit bf6a8bf

File tree

1 file changed

+30
-0
lines changed

1 file changed

+30
-0
lines changed

README.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,36 @@ generateFonts({
150150
}).then(results => console.log(results));
151151
```
152152

153+
#### Organising icons
154+
155+
Icon names and className will be generated from a slug of the relative path + basename of each `.svg` file found in the input directory.
156+
157+
This allows arranging your icons in namespaces, which can be useful if a project uses a large number of icons.
158+
159+
Considering the following `./icons` input directory:
160+
161+
```
162+
icons
163+
├── logo.svg
164+
├── social
165+
│ ├── facebook.svg
166+
│ └── twitter.svg
167+
└── symbol
168+
└── chevron
169+
├── left.svg
170+
└── right.svg
171+
```
172+
173+
Running `fantasticon ./icons -o dist` will generate a font-set with the following Icon IDs / CSS selectors:
174+
And the generated icon IDs would be:
175+
176+
| Icon ID | CSS selector |
177+
| ---------------------- | ---------------------------- |
178+
| `social-facebook` | `.icon.icon-social-facebook` |
179+
| `social-twitter` | `.icon.icon-social-twitter` |
180+
| `symbol-chevron-left` | `.icon.icon-chevron-left` |
181+
| `symbol-chevron-right` | `.icon.icon-chevron-right` |
182+
153183
### Contribute
154184

155185
PRs are always welcome. If you need help questions, want to bounce ideas or just say hi, [join the Discord channel](https://discord.gg/BXAY3Kc3mp).

0 commit comments

Comments
 (0)