Svelte Icons

Combines Heroicons V2 → & Simple Icons → as easy to use SVG components in your svelte project.

Checkout the changelog to see what's new.

Why this package?

Copying SVG code into your project can become tedious and messy. With icons it can become particularly unnecessary as you probably don't need to edit the SVG markup. This library simply makes it easier to import each icon and have it scale based on it's inherited font-size.

This library adapts the following repositories for use in Svelte:

• Heroicons: tailwindlabs/heroicons
• Simple Icons: simple-icons/simple-icons

Usage

Install

# npm
npm i @designthen/svelte-icons@latest

#yarn
yarn add @designthen/svelte-icons@latest

#pnpm
pnpm add @designthen/svelte-icons@latest

Importing Icons

View an example in /src/routes/+page.svelte

Note that component names can't start with a number, so icons like 1Password are prefixed with I and renamed to I1Password. You might ask why we don't rename icons like 1Password to OnePassword? Well, that's because the original icon is called 1Password and we want it to be easy to search for with intellisense.

<script>
	// using default exports for single icons
	import StarSolid from '@designthen/svelte-icons/heroicon-24-solid/star-solid';

	// using named exports for multiple icons in a pack
	import { Github, I500px } from '@designthen/svelte-icons/simple-icons';
</script>

| Icon Pack | Import Path | | ----------------- | ---------------------------------------------- | | Heroicons solid | @designthen/svelte-icons/heroicon-24-solid | | Heroicons outline | @designthen/svelte-icons/heroicon-24-outline | | Heroicons small | @designthen/svelte-icons/heroicon-20-solid | | Simple Icons | @designthen/svelte-icons/simple-icons |

From each pack you can import multiple icons from a pack at once, or import a single icon directly.

Passed Props

Icons should behave as you expect most components.

<script>
	// import 1 icon directly (recommended)
	import GitHub from '@designthen/svelte-icons/simple-icons/github.svelte';
	// import multiple icons from a pack
	import { Svelte, OnePassword } from '@designthen/svelte-icons/simple-icons';
</script>

<style>
	:global(.icon) {
		height: 24px;
	}

	section :global(svg) {
		fill: red;
	}
</style>

<OnePassword class="icon" style="width:24px;" />
<Svelte class="icon" style="width:24px;" />
<GitHub class="icon" style="width:24px;" />

Contributing

There are new icons that are missing from this package. How do I updating this package to include them?

1. Make sure you have dependencies installed with pnpm install.
2. Run pnpm icon:update to clone and import the latest SVG's from the following repositories:
   1. Heroicons: @tailwindlabs: heroicons/src.
   2. Simple Icons: @simple-icons: simple-icons/icons.
3. You'll likely see that a few hundred files have changed. Run pnpm format to ensure consistent formatting. Now you'll see that only new or updated icon files have changed.

How to I contribute my work?

1. Commit your changes
2. Run npx changeset to create a new changeset.
   1. Follow the instructions to create a changeset.
   2. Adding new icons is considered a minor version bump.
   3. Commit the changeset.
3. Open a pull request. Feel free to tag @OllieJT or @DesignThen.

How do I add new icon packs aside from Heroicons and Simple Icons?

We're open to adding new icon packs.

A script should be written for each new pack added - this is fairly simple and is mostly copying and pasting from the existing scripts. In the future I will add more details about writing a "clone script".

1. Place all SVG icons in /import with one level of folder structure.
   • you should not nest svg's more than one level deep
   • only svg's are imported
   • svg code is not validated
   • svg attributes will be standardized
2. run yarn import-svg to convert all SVG files to svelte components.
3. Generated files can be found at /src/lib/....

Example folder structure

import/
⮑ heroicons-solid/
   ⮑ icon1.svg
   ⮑ icon2.svg
   ⮑ ..
⮑ heroicons-outline/
   ⮑ icon1.svg
   ⮑ icon2.svg
   ⮑ ...
⮑ .gitkeep
README.md (you're here)
package.json
...

How do I publish a new version to npm?

Above you'll see we answer How to I contribute my work?. Here we explain how to use changesets to trigger a new version to be prepared. Once a PR has been approved that contains a changeset, a new version will be build and deployed to npm via github actions.