svelte-ux
svelte-ux copied to clipboard
[Icon] Add examples / support for other icon libraries (unplugin-icons, web components)
While Icon supports a large number of icon formats, most notable when the icons are published as SVG paths in a package such as Material Design Icons or Font Awesome...
<script>
import { mdiAccount } from '@mdi/js'
import { faUser } from '@fortawesome/free-solid-svg-icons';
</script>
<Icon data={mdiAccount} />
<Icon data={faUser} />
It also support <svg>
icons using either URLs...
<Icon svgUrl="https://api.iconify.design/mdi:account.svg" />
strings...
<Icon
svg={'<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4Z"/></svg>'}
/>
or slots...
<Icon>
<svg width="32" height="32" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4Z"
/>
</svg>
</Icon>
It would be helpful if we supported/documented using unplugin-icons and possibly Svelte components / Web components (such as Iconify).