Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
techniq opened this issue Nov 25, 2023 · 0 comments

Comments

@techniq
Copy link
Owner

techniq commented Nov 25, 2023

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 techniq changed the title Add examples / support for other icon libraries (unplugin-icons, web components) [Icon] Add examples / support for other icon libraries (unplugin-icons, web components) Nov 25, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant