Svelte-Pangolicons

Pangolicons, but for Svelte! 🎉

🚀 Getting started

Install the package via npm:

npm install svelte-pangolicons

You can then import the Icons you want to use into your component.

<script>
	// Import the icons you want to use
	import { Pangolin } from 'svelte-pangolicons';

	// if the Icon's conflicts with one of your own components,
	// you can import them by a different name

	import { Pangolin as PangolinIcon } from 'svelte-pangolicons';
</script>

<Pangolin />
<PangolinIcon />

All icons are converted to PascalCase to work with svelte out of the box.

`Attributes`

You might pass a attributes object to the component using the spread syntax containing the following properties:

Property	Type	Description
size	String?	The size of the Icon.
class	String?	A custom class name to append to the icon classes.
strokeWidth	String?	The stroke-width property of the svg
color	String?	The color of the stroke
linejoin	String?	The linejoin of the stroke
linecap	String?	The linecap of the stroke

You can also pass the properties individually.

<script>
	// The attributes below are the default attributes every icon has

	const attributes = {
		size: '24',
		strokeWidth: '1.5',
		class: 'pangolicon',
		color: 'currentColor',
		linejoin: 'round',
		linecap: 'round',
	};
</script>

...

<Pangolin {...attributes} />

📋 License

Svelte-Pangolicons is licensed under the MIT License.

🦄 Inspiration

Pangolicons is heavily inspired by Feather Icons & Lucide Icons. Svelte-Pangolicons was inspired by Svelte-Feather-Icons.