@ajwdmedia/svelterial-symbols

Svelte + Material Symbols ❤️

Copies SVG components from @material-symbols/svg-200, @material-symbols/svg-400, and @material-symbols/svg-700 and creates Svelte components
Also see sister project @ajwdmedia/svelterial-icons

BREAKING - This package is now Svelte 5 Only
If you need Svelte 4 support, you must use @ajwdmedia/svelterial-icons or backtrack to v0.3.0, which has a different API.

Packages:

npm install @ajwdmedia/svelterial-symbols-light
npm install @ajwdmedia/svelterial-symbols
npm install @ajwdmedia/svelterial-symbols-bold

Quirks

Files should be named the same as on the Material Symbols site, however PascalCased
Icon names that start with numbers have "Icon" preceeding them (1k Plus => Icon1kPlus.svelte)
Icons are also available in Light (200) and Bold (700) widths, and are available on NPM in different packages (see above)

Icons are grouped by style and filled Variants To help with tree shaking, you must import each icon string individually and register them yourself.
Import the style, then use the new dot notation syntax to access each icon (similar to how threlte works)
In theory, any unused icons should be stripped from your final bundle. In theory.
Typescript should hopefully be able to handle autocomplete for you.

// $lib/icon.ts
import { Person, SomethingElse } from "@ajwdmedia/svelterial-symbols/outlined";
import { useIcons } from "@ajwdmedia/svelterial-symbols";

export const Icon = useIcons({ Person, SomethingElse });

<script>
    // then use them
    import { Icon } from "$lib/icon"
</script>

<Icon.Person fill="black" size="1.25em" />

License

(Copied from marella/material-symbols)
Material Symbols are created by Google

We have made these icons available for you to incorporate into your products under the Apache License Version 2.0. Feel free to remix and re-share these icons and documentation in your products. We'd love attribution in your app's about screen, but it's not required.