SebinNyshkim/character-ref
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: 🚚 use iconify identifiers for icon names

Browse source 
This allows to distinguish icons from different packs and allows VS Code extensions to display the icon in the code editor
This commit is contained in:
Sebin Nyshkim 2025-06-23 18:56:51 +02:00
parent 166df1cff1
commit 2ac721058f
5 changed files with 76 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/components/icon.webc
View file

@ -1,5 +1,5 @@
<svg
webc:if="icon === 'whiskey'"
webc:if="icon === 'fa6-solid:whiskey-glass'"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
@ -11,7 +11,7 @@
</svg>
<svg
webc:elseif="icon === 'tree'"
webc:elseif="icon === 'fa6-solid:tree'"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
@ -23,7 +23,7 @@
</svg>
<svg
webc:elseif="icon === 'car'"
webc:elseif="icon === 'fa6-solid:car'"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
@ -35,7 +35,7 @@
</svg>
<svg
webc:elseif="icon === 'helmet-safety'"
webc:elseif="icon === 'fa6-solid:helmet-safety'"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
@ -47,7 +47,7 @@
</svg>
<svg
webc:elseif="icon === 'industry'"
webc:elseif="icon === 'fa6-solid:industry'"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
@ -59,7 +59,7 @@
</svg>
<svg
webc:elseif="icon === 'truck'"
webc:elseif="icon === 'fa6-solid:truck'"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
@ -71,7 +71,7 @@
</svg>
<svg
webc:elseif="icon === 'boxes-stacked'"
webc:elseif="icon === 'fa6-solid:boxes-stacked'"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
@ -83,7 +83,7 @@
</svg>
<svg
webc:elseif="icon === 'cake-candles'"
webc:elseif="icon === 'fa6-solid:cake-candles'"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
@ -95,7 +95,7 @@
</svg>
<svg
webc:elseif="icon === 'mars'"
webc:elseif="icon === 'fa6-solid:mars'"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
@ -107,7 +107,7 @@
</svg>
<svg
webc:elseif="icon === 'arrows-up-down'"
webc:elseif="icon === 'fa6-solid:arrows-up-down'"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
@ -119,7 +119,7 @@
</svg>
<svg
webc:elseif="icon === 'weight-hanging'"
webc:elseif="icon === 'fa6-solid:weight-hanging'"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
@ -131,7 +131,7 @@
</svg>
<svg
webc:elseif="icon === 'ruler'"
webc:elseif="icon === 'fa6-solid:ruler'"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
@ -143,7 +143,7 @@
</svg>
<svg
webc:elseif="icon === 'heart'"
webc:elseif="icon === 'fa6-solid:heart'"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
@ -155,7 +155,7 @@
</svg>
<svg
webc:elseif="icon === 'shapes'"
webc:elseif="icon === 'fa6-solid:shapes'"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
@ -167,7 +167,7 @@
</svg>
<svg
webc:elseif="icon === 'maximize'"
webc:elseif="icon === 'fa6-solid:maximize'"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
@ -179,7 +179,7 @@
</svg>
<svg
webc:elseif="icon === 'star'"
webc:elseif="icon === 'fa6-solid:star'"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
@ -191,7 +191,7 @@
</svg>
<svg
webc:elseif="icon === 'eye'"
webc:elseif="icon === 'fa6-solid:eye'"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
@ -203,7 +203,7 @@
</svg>
<svg
webc:elseif="icon === 'tooth'"
webc:elseif="icon === 'fa6-solid:tooth'"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
@ -215,7 +215,7 @@
</svg>
<svg
webc:elseif="icon === 'face-grin-tongue'"
webc:elseif="icon === 'fa6-solid:face-grin-tongue'"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
@ -227,7 +227,7 @@
</svg>
<svg
webc:elseif="icon === 'ear-listen'"
webc:elseif="icon === 'fa6-solid:ear-listen'"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
@ -239,7 +239,7 @@
</svg>
<svg
webc:elseif="icon === 'dragon'"
webc:elseif="icon === 'fa6-solid:dragon'"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
@ -251,7 +251,7 @@
</svg>
<svg
webc:elseif="icon === 'info'"
webc:elseif="icon === 'fa6-solid:info'"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 192 512"
@ -263,7 +263,7 @@
</svg>
<svg
webc:elseif="icon === 'feather'"
webc:elseif="icon === 'fa6-solid:feather'"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
@ -275,7 +275,7 @@
</svg>
<svg
webc:elseif="icon === 'shoe-prints'"
webc:elseif="icon === 'fa6-solid:shoe-prints'"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
@ -287,7 +287,7 @@
</svg>
<svg
webc:elseif="icon === 'dumbbell'"
webc:elseif="icon === 'fa6-solid:dumbbell'"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
@ -299,7 +299,7 @@
</svg>
<svg
webc:elseif="icon === 'bars'"
webc:elseif="icon === 'fa6-solid:bars'"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
@ -311,7 +311,7 @@
</svg>
<svg
webc:elseif="icon === 'chevron-left'"
webc:elseif="icon === 'fa6-solid:chevron-left'"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
@ -323,7 +323,7 @@
</svg>
<svg
webc:elseif="icon === 'chevron-right'"
webc:elseif="icon === 'fa6-solid:chevron-right'"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

Before After
Before After

4
src/components/ref-gallery.webc
View file

@ -96,10 +96,10 @@
<section aria-label="Image gallery" webc:root="override">
<button class="prev" aria-label="Previous Image">
<icon icon="chevron-left"></icon>
<icon icon="fa6-solid:chevron-left"></icon>
</button>
<button class="next" aria-label="Next Image">
<icon icon="chevron-right"></icon>
<icon icon="fa6-solid:chevron-right"></icon>
</button>
<div class="track">