svelte-ux icon indicating copy to clipboard operation
svelte-ux copied to clipboard

[Icon] Add examples / support for other icon libraries (unplugin-icons, web components)

Open techniq opened this issue 1 year ago • 0 comments

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).

techniq avatar Nov 25 '23 20:11 techniq