Icons β
Π¦Π΅ ΡΡΠ°ΡΡΡ ΠΏΡΠΎ ΡΠ°ΠΌΡ ΡΠΊΠΎΠ½ΠΊΠΈ, Π°Π»Π΅ Π½Π΅ ΠΏΡΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ wt-icon.vue.
(fun) facts:
- ΠΠΊΠΎΠ½ΠΊΠΈ β
.svg - ΠΠΊΠΎΠ½ΠΊΠΈ Π»Π΅ΠΆΠ°ΡΡ Ρ
src/assets/icons/sprite... - ... Ρ ΠΏΡΠ΄ΠΊΠ»ΡΡΠ°ΡΡΡΡΡ Ρ
index.tsΡΠ°ΠΉΠ»Ρ... - ...Ρ ΠΎΡΠ° "Π² Π³Π»ΠΈΠ±ΠΈΠ½Ρ" ΡΠ°ΠΌ ΠΏΡΠΎΡΠ΅Ρ ΠΏΡΠ΄ΠΊΠ»ΡΡΠ΅Π½Π½Ρ Ρ ΡΠΊΠ»Π°Π΄Π½ΡΡΠΈΠΉ.
- ΠΠΊΠΎΠ½ΠΊΠΈ Π²ΠΈΠΊΠΎΡΠΈΡΡΠΎΠ²ΡΡΡΡΡΡ ΡΡΠ»ΡΠΊΠΈ ΡΠ΅ΡΠ΅Π·
wt-icon.vueΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ - ΠΡΠ½ΠΎΠ²Π½Ρ ΡΠΊΠΎΠ½ΠΊΠΈ ΠΏΡΠ΄ΠΊΠ»ΡΡΠ°ΡΡΡΡΡ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎ Ρ
@webitel/ui-sdk - Project-level ΡΠΊΠΎΠ½ΠΊΠΈ ΠΏΡΠ΄ΠΊΠ»ΡΡΠ°ΡΡΡΡΡ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎ Π² ΠΊΠΎΠΆΠ½ΠΎΠΌΡ ΠΏΡΠΎΡΠΊΡΡ
iconsRepository: how icons are included? β
ΠΠ°Π΄Π°ΡΠ°: β
ΠΏΡΠ΄ΠΊΠ»ΡΡΠΈΡΠΈ ΡΠΊΠΎΠ½ΠΊΠΈ Π΄ΠΎ ΠΏΡΠΎΡΠΊΡΡ, ΡΠΎΠ± Π²ΠΈΠΊΠΎΡΠΈΡΡΠΎΠ²ΡΠ²Π°ΡΠΈ ΡΡ
Ρ wt-icon.vue ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ.
Π£ΠΌΠΎΠ²ΠΈ: β
- ΠΠ΅ "ΡΠΎΠ·Π΄ΡΠ²Π°ΡΠΈ" ΠΎΠ΄ΠΈΠ½
wt-icon.vueΡΠ°ΠΉΠ». - ΠΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΠΈΠΉ Π΄Π»Ρ Π±Π°Π½Π΄Π»Π΅ΡΠ° ΡΠΏΠΎΡΡΠ± ΠΏΡΠ΄ΠΊΠ»ΡΡΠ΅Π½Π½Ρ.
- ΠΠΎΠΆΠ»ΠΈΠ²ΡΡΡΡ ΠΏΡΠ΄ΠΊΠ»ΡΡΠ°ΡΠΈ Π΄ΠΎΠ΄Π°ΡΠΊΠΎΠ²Ρ ΡΠΊΠΎΠ½ΠΊΠΈ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎ Π² ΠΊΠΎΠΆΠ½ΠΎΠΌΡ ΠΏΡΠΎΡΠΊΡΡ.
- ΠΠΎ ΠΌΠΎΠΆΠ»ΠΈΠ²ΠΎΡΡΡ, ΠΎΠ±ΡΠΉΡΠΈΡΡ Π±Π΅Π· Π΄ΠΎΠ΄Π°ΡΠΊΠΎΠ²ΠΈΡ
ΠΏΠ»Π°Π³ΡΠ½ΡΠ² (ΡΠ°Π½ΡΡΠ΅ Π²ΠΈΠΊΠΎΡΠΈΡΡΠΎΠ²ΡΠ²Π°ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ½ΠΈΠΉ
vite-plugin-svg-sprite, ΡΠΊΠΈΠΉ ΡΠΊ ΠΏΡΠ΄Ρ ΡΠ΄ ΠΌΡΠ³ΡΡΠ²Π°Π² Π· Π½Π°ΠΌΠΈ ΠΏΡΡΠ»Ρ Π°Π½Π°Π»ΠΎΠ³ΡΡΠ½ΠΎΡ ΡΡΠ»Π·ΠΈ Π΄Π»Ρ Webpack)
Π ΡΡΠ΅Π½Π½Ρ: β
ΠΠΊΡΠ΅ΠΌΠ°, ΡΠΏΡΠ»ΡΠ½Π° Map'Π° ΡΠΊΠΎΠ½ΠΎΠΊ, Π² ΡΠΊΡ ΠΌΠΎΠΆΠ½Π° Π΄ΠΎΠ΄Π°Π²Π°ΡΠΈ ΡΠΊΠΎΠ½ΠΊΠΈ, Ρ Π· ΡΠΊΠΎΡ ΠΌΠΎΠΆΠ½Π° ΡΠ΅ΡΠ΅Π· Π³Π΅ΡΡΠ΅Ρ ΠΎΡΡΠΈΠΌΡΠ²Π°ΡΠΈ ΡΠΊΠΎΠ½ΠΊΡ. Π¦Π΅, Π²Π»Π°ΡΠ½Π΅, Ρ Ρ iconsRepository.ts.
ΠΡΠ°Π½ΡΠΈ: β
ΠΠ° ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΏΡΠ΄Ρ
ΠΎΠ΄Ρ, ΡΠΊΠΎΠ½ΠΊΠ° Π²ΡΡΠ°Π²Π»ΡΡΡΡΡΡ Ρ wt-icon ΡΠ΅ΡΠ΅Π· v-html, Π° ΠΎΡΠΆΠ΅ ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΡΠΉ Π½Π΅ ΠΌΠΎΠΆΠ½Π° Π΅ΠΊΡΠΏΠΎΡΠ·ΠΈΡΠΈ Ρ window. ΠΠ° ΡΡΠ²Π½Ρ Π΄ΠΎΠ΄Π°Π²Π°Π½Π½Ρ ΡΠΊΠΎΠ½ΠΎΠΊ Π΄ΠΎ ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΡΡ, Π²ΠΎΠ½ΠΈ "ΡΠΈΡΡΡΡΡΡΡ" ΡΠ΅ΡΠ΅Π· dompurify, Π°Π»Π΅, ΡΠ°ΠΌΡ ΡΠΎΠ·ΡΠΌΡΡΡΠ΅, ΡΠΏΡΠ°Π²Π° ΡΠ°ΠΊΠ°.
ΠΡΠΎΠ±Π»Π΅ΠΌΠΈ: β
WARNING
ΠΠ²Π°ΠΆΠ°ΠΉΡΠ΅: ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Ρ Π°ΠΊΡΡΠ°Π»ΡΠ½ΠΎΡ ΡΡΠ»ΡΠΊΠΈ Π΄Π»Ρ Π°ΠΏΠΏΠ»ΡΠΊΠ΅ΠΉΡΠ΅Π½ΡΠ², Π΄Π΅ Ρ ΡΠ²ΠΎΡ Π»ΠΎΠΊΠ°Π»ΡΠ½Ρ ΡΠΊΠΎΠ½ΠΊΠΈ, ΡΠΊΡ ΡΡΠ΅Π±Π° ΠΏΡΠ΄ΠΊΠ»ΡΡΠ°ΡΠΈ. Π―ΠΊΡΠΎ ΡΠ°ΠΊΠΈΡ ΡΠΊΠΎΠ½ΠΎΠΊ Π½Π΅ΠΌΠ°Ρ, ΡΠΎ ΡΠ΅ Π½Π΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΡ, Π±ΠΎ Π³Π»ΠΎΠ±Π°Π»ΡΠ½Ρ ΡΠΊΠΎΠ½ΠΊΠΈ ΠΏΡΠ΄ΠΊΠ»ΡΡΠ°ΡΡΡΡΡ Π² ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Ρ Π»ΡΠ±ΠΈ.
Π§Π΅ΡΠ΅Π· ΡΠ΅ ΡΠΎ ΡΡ ΠΌΠ°ΠΏΠ° ΡΠΌΠΏΠΎΡΡΡΡΡΡΡΡ Ρ wt-icon.vue, ΡΠΊΠΈΠΉ Π±ΡΠ»Π΄ΠΈΡΡΡΡ ΡΠΊ Π»ΡΠ±Π° Ρ Π΄Π΅ΡΠΎΠ»ΡΠ½ΠΎΠΌΡ Π΅ΠΊΡΠΏΠΎΡΡΡ @webitel/ui-sdk, ΡΠΎ Ρ ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΡΠΉ ΡΠΊΠΎΠ½ΠΎΠΊ ΡΠ°ΠΊΠΎΠΆ Π±Π°Π½Π΄Π»ΠΈΡΡΡΡ ΡΠ°Π·ΠΎΠΌ Π· Π»ΡΠ±ΠΎΡ.
Π ΡΠΎΠΉ ΡΠ°Ρ, ΡΠΊ Π½Π΅ Π·Π±ΡΠ»Π΄ΠΆΠ΅Π½ΠΈΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ wt-icon.vue ΠΌΠΎΠΆΠ½Π° ΡΠΌΠΏΠΎΡΡΠ½ΡΡΠΈ Π½Π°ΠΏΡΡΠΌΡ Π· @webitel/ui-sdk/components, Ρ Π²ΡΠ½ ΡΡΠ³Π½Π΅ raw ΡΠ°ΠΉΠ» iconsRepository.ts.
Π ΠΎΡΠΆΠ΅, ΡΠΊΡΠΎ ΠΌΠΈ Π²ΠΈΠΊΠΎΡΠΈΡΡΠΎΠ²ΡΡΠΌΠΎ Ρ ΠΏΡΠΎΡΠΊΡΡ wt-icon.vue ΠΎΠ΄Π½ΠΎΡΠ°ΡΠ½ΠΎ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎ ΠΏΡΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠΉ wt-icon, Ρ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎ ΡΠΌΠΏΠΎΡΡΠ½ΡΡΠΈΠΉ wt-icon, ΡΠΎ, ΡΠ°ΠΊΡΠΈΡΠ½ΠΎ, ΠΌΠΈ ΠΌΠ°ΡΠΌΠΎ 2 ΠΎΠΊΡΠ΅ΠΌΠΎ ΠΆΠΈΠ²ΡΡΠΈΡ
Π²Π΅ΡΡΡΡ ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΡΡ ΡΠΊΠΎΠ½ΠΎΠΊ. Π ΠΎΡΠΆΠ΅, Π»ΠΎΠΊΠ°Π»ΡΠ½Ρ ΡΠΊΠΎΠ½ΠΊΠΈ ΡΡΠ΅Π±Π° ΠΏΡΠ΄ΠΊΠ»ΡΡΠ°ΡΠΈ Π΄Π²ΡΡΡ.
ΠΠ°ΠΏΡΠΈΠΊΠ»Π°Π΄:
- ΠΡΠ°ΠΊ ΡΡΠ΅Π±Π° ΡΠΌΠΏΠΎΡΡΠ½ΡΡΠΈ ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΡΡ ΡΠΊΠΎΠ½ΠΎΠΊ,
- Π° ΠΎΡΠ°ΠΊ β Π·Π°ΡΠ΅ΡΡΡΡΡΠ²Π°ΡΠΈ Π»ΠΎΠΊΠ°Π»ΡΠ½Ρ ΡΠΊΠΎΠ½ΠΊΠΈ.
Project-level (local) icons β
Π£ Π΄Π΅ΡΠΊΠΈΡ
Π°ΠΏΠΏΠ»ΡΠΊΠ΅ΠΉΡΠ΅Π½Π°Ρ
Ρ ΡΠ²ΠΎΡ Π½Π°Π±ΠΎΡΠΈ ΡΠΊΠΎΠ½ΠΎΠΊ, ΡΠΊΡ ΠΏΡΠ΄ΠΊΠ»ΡΡΠ°ΡΡΡΡΡ ΡΠ°ΠΌΠ΅ Π² ΡΠΈΡ
Π°ΠΏΠΏΠ»ΡΠΊΠ΅ΠΉΡΠ΅Π½Π°Ρ
. ΠΠΎ, Π²ΠΎΠ½ΠΈ Π»ΠΎΠΊΠ°Π»ΡΠ½Ρ, Ρ Π·Π°Π΄ΡΠΌΠΊΠ° ΡΠ°ΠΊΠ° ΡΠΎΠ± Π½Π΅ ΡΡΠ³ΡΠΈ ΡΡ
Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΈΠΉ Π±Π°Π½Π΄Π». ΠΠ°ΠΏΡΠΈΠΊΠ»Π°Π΄, ΡΠ΅ ΡΠΊΠΎΠ½ΠΊΠΈ Π½ΠΎΠ΄ΡΠ² Ρ webitel-flow-diagram, Π°Π±ΠΎ ΡΠΊΠΎΠ½ΠΊΠΈ ΡΠΎΠ·Π΄ΡΠ»ΡΠ² Ρ Admin.
Icons naming convention β
App-specific icons are highly recommended to be named with the prefix corresponding to this application.
The reason is: when you see an icon usage, you will be able to distinguish svg location: in this app, or library - and update it, if needed. For example, if you want to move this icon from app to library, you just need to remove icon-prefix prop from all icon usages (and, of course, rename the icon file)
Icon prefix corresponding to application: β
- Webitel UI: no prefix
- Admin:
adm- - Workspace:
ws- - Supervisor:
sv- - History:
hs- - Webitel CC UI:
cc-
How to clean up icons before adding them to project? β
After export from Figma, icons should be cleaned up to avoid sizing/color issues.
Use this checklist:
- Remove
widthandheightfrom svg-tag

- Check
viewBox: it's size should be square (BUT DO NOT DELETE!)
If there's an issue, contact the designer.
Incorrect: 
Correct: 
- Remove
fill="none"from svg-tag

- Remove all
fill=""with default color
Default "fill" should be cleaned up, cause Figma adds it to icon by default, but we are changing this fill in styles to suit our needs. But! Specific colors should stay in svg-code. (for instance, red dot in record icon)
