metonym/svelte-octicons

GitHub Octicons as Svelte components

svelte-octicons

GitHub Octicons as Svelte components.

This library builds GitHub Primer Octicons as Svelte components with zero dependencies.

Try it in the Svelte REPL.

---

Installation

# Yarn
yarn add -D svelte-octicons

# npm
npm i -D svelte-octicons

# pnpm
pnpm i -D svelte-octicons

Usage

Refer to ICON_INDEX.md for a list of available icons.

Base import

$$restProps are forwarded to the svg element.

<script>
  import { Alert16, Diamond16, Rocket16, Video16 } from "svelte-octicons";
</script>

<Alert16 />
<Diamond16 />
<Rocket16 />
<Video16 />

Custom fill

<Alert16 fill="red" />

Usage with svelte:component

<script>
  import * as Octicons from "svelte-octicons";
</script>

{#each Object.entries(Octicons) as [octicon, component]}
  <div>
    <svelte:component this={component} />
    {octicon}
  </div>
{/each}

TypeScript

Svelte version 3.31 or greater is required to use this library with TypeScript.

Changelog

Changelog

License

MIT

svelte-octicons's Issues

Add export for Svelte

I get this warning using svelte-octicons in SvelteKit:

10:51:37 AM [vite-plugin-svelte] WARNING: The following packages have a svelte field in their package.json but no exports condition for svelte.

[email protected]

Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition for details.

I think the change would mean adding a block to package.json like this:

// package.json
  "svelte": "./package/lib/index.js"
+ "exports": {
+   ".": {
+       "svelte": "./package/lib/index.js"
+   }
}

I'm happy to open a PR to add this.