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.