@aziontech/icons 1.3.0 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +56 -14
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -141,7 +141,7 @@ Icons inherit color via `currentColor`, making them trivially themeable with CSS
|
|
|
141
141
|
|
|
142
142
|
```css
|
|
143
143
|
.my-icon {
|
|
144
|
-
font-size:
|
|
144
|
+
font-size: 14px; /* control size */
|
|
145
145
|
color: #f97316; /* control color */
|
|
146
146
|
}
|
|
147
147
|
```
|
|
@@ -169,6 +169,59 @@ The generated CSS base class sets the following properties on each icon prefix (
|
|
|
169
169
|
|
|
170
170
|
---
|
|
171
171
|
|
|
172
|
+
## Designing
|
|
173
|
+
|
|
174
|
+
### Drawing Icons
|
|
175
|
+
|
|
176
|
+
Use the [Figma template file to draw](https://www.figma.com/design/aerxJReCkLz3x3z29IERE9/Azion-Icons?node-id=937-361) and turn new icons avaiable in [Icon Library](https://www.figma.com/design/aerxJReCkLz3x3z29IERE9/Azion-Icons?node-id=933-65) across design files in Figma.
|
|
177
|
+
|
|
178
|
+
<img width="192" height="192" alt="image" src="https://github.com/user-attachments/assets/6616ec55-a7eb-4517-8dd4-de0593d549d6" />
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
Follow these rules when drawing icons:
|
|
182
|
+
|
|
183
|
+
- Tam: 90x90
|
|
184
|
+
- Stroke: 6pt
|
|
185
|
+
- Grid: 4px
|
|
186
|
+
- Grid 2: 2px
|
|
187
|
+
- Color: #000000 or text-color
|
|
188
|
+
- Layer name: Vector
|
|
189
|
+
|
|
190
|
+
|
|
191
|
+
After the icon is finished move to the Library page, put in the right category in 14x14px size and organize the layer follow this sample above:
|
|
192
|
+
|
|
193
|
+
<img width="422" height="303" alt="image" src="https://github.com/user-attachments/assets/e4d9feb1-4c6b-411c-b86b-afff689f9561" />
|
|
194
|
+
|
|
195
|
+
*Always use the Union feature to convert strokes into a unified path.*
|
|
196
|
+
|
|
197
|
+
### Preparing SVG files for export
|
|
198
|
+
|
|
199
|
+
To ensure compatibility with our icon font pipeline (fantasticon + validation script), all SVGs must be properly cleaned and normalized before being added to src/svg-raw/.
|
|
200
|
+
|
|
201
|
+
We recommend using the Figma [SVG Export plugin](https://www.figma.com/community/plugin/814345141907543603/svg-export) with the linked preset (Icons Library) to automatically prepare icons according to our standards.
|
|
202
|
+
|
|
203
|
+
Preset reference file: [`presets/preset-svg-export.json`](presets/svg-export.json)
|
|
204
|
+
|
|
205
|
+
- Convert all shapes to `<path>`
|
|
206
|
+
- Remove unnecessary metadata and attributes
|
|
207
|
+
- Merge paths when possible
|
|
208
|
+
- Remove strokes
|
|
209
|
+
- Normalize fills
|
|
210
|
+
- Minify + optimize path data (multipass)
|
|
211
|
+
- Convert `black` to `currentColor`
|
|
212
|
+
- Remove hard-coded fills and strokes
|
|
213
|
+
|
|
214
|
+
### Checking the SVG
|
|
215
|
+
|
|
216
|
+
Here's how that your SVG needs to looks in code:
|
|
217
|
+
```
|
|
218
|
+
<svg width="14" height="14" fill="currentColor">
|
|
219
|
+
<path d="M6.882.032a.581.581 0 0 1 .35.036l6.4 2.8a.58.58 0 0 1 .348.532v7.2a.58.58 0 0 1-.348.531l-6.4 2.8a.58.58 0 0 1-.464 0l-6.4-2.8A.58.58 0 0 1 .02 10.6V3.4a.58.58 0 0 1 .348-.532l6.4-2.8.114-.036ZM1.18 10.22l5.24 2.293V6.579L1.18 4.286v5.934Zm6.4-3.64v5.932l5.24-2.292V4.286L7.58 6.58ZM2.047 3.4 7 5.566 11.953 3.4 7 1.233 2.046 3.4Z"/>
|
|
220
|
+
</svg>
|
|
221
|
+
```
|
|
222
|
+
|
|
223
|
+
---
|
|
224
|
+
|
|
172
225
|
## Development
|
|
173
226
|
|
|
174
227
|
### Project structure
|
|
@@ -220,21 +273,10 @@ The generated CSS base class sets the following properties on each icon prefix (
|
|
|
220
273
|
|
|
221
274
|
Follow the same steps above but place the SVG in [`src/svg-raw/pi/`](src/svg-raw/pi/) using the `pi-` prefix.
|
|
222
275
|
|
|
223
|
-
### SVG
|
|
276
|
+
### Validate the SVG
|
|
224
277
|
|
|
225
278
|
All SVG source files are validated by [`scripts/validate.mjs`](scripts/validate.mjs) before font generation. SVGs must:
|
|
226
279
|
|
|
227
|
-
| Requirement | Detail |
|
|
228
|
-
|-------------|--------|
|
|
229
|
-
| ✅ Have a `<path>` element | Icon fonts require path data |
|
|
230
|
-
| ✅ Use `fill` (not `stroke`) | Icon fonts only support filled shapes |
|
|
231
|
-
| ✅ Use `currentColor` for fill | Enables CSS color theming (no `fill="black"` or `fill="#000"`) |
|
|
232
|
-
| ✅ Square `viewBox` | Required for consistent rendering |
|
|
233
|
-
| ✅ `24x24` viewBox preferred | Standard size (`viewBox="0 0 24 24"`) |
|
|
234
|
-
| ✅ No spaces in filename | Causes build failures |
|
|
235
|
-
| ✅ No placeholder content | No `<rect>` + `<text>` with `?` |
|
|
236
|
-
| ⚠️ No `<clipPath>` | May not render correctly in icon fonts |
|
|
237
|
-
|
|
238
280
|
Run the validation script at any time:
|
|
239
281
|
|
|
240
282
|
```bash
|
|
@@ -255,7 +297,7 @@ The report shows ❌ errors (blocking — build will fail), ⚠️ warnings (may
|
|
|
255
297
|
- Non-square viewBox
|
|
256
298
|
|
|
257
299
|
**Info-level checks**:
|
|
258
|
-
- Non-standard viewBox size (anything other than
|
|
300
|
+
- Non-standard viewBox size (anything other than 14x14)
|
|
259
301
|
|
|
260
302
|
---
|
|
261
303
|
|