@liquidiqq/iconkit

Community icons for the Svelte ecosystem.

Note Iconkit's website for browsing icons is coming soon.

---

About

Iconkit is a treeshakale Svelte/SvelteKit library. It's a collection of community icons from different sources, including Heroicons, Ionicons' brand logos, and icons made by Iconkit.

Features

• Heroicons and Ionicons' brand logos out of the box
• Add your svg logos, and custom icons in three modes: outline, solid, and mini
• Full tree-shaking (only used icons are bundled)
• Works with or without Tailwindcss

Getting started

Install via CLI (recommended)

```bash
npx iconkit-cli

The CLI will install Iconkit, add the required classes, and import them to your +layout.svelte so you can start using Iconkit right away:

<!-- +page.svelte or component.svelte -->

<script>
  import { Icon } from '@liquidiqq/iconkit'
</script>

<Icon name="face-smile" />

Install manually (skipping the CLI, not recommended)

step 1. Install Iconkit:

npm install -D @liquidiqq/iconkit

step 2. Add classes:

Copy below classes to your global stylesheet e.g. app.css/app.postcss if you are not using Tailwindcss:

Note If you are using Tailwindcss, you can skip this step as Tailwindcss already has these classes.

/* app.css` or `app.postcss */

/* --- Iconkit regular icon size --- */
.h-6 {
  height: 1.5rem;
}
.w-6 {
  width: 1.5rem;
}

/* --- Iconkit mini icon size --- */
.h-5 {
  height: 1.25rem;
}
.w-5 {
  width: 1.25rem;
}

Now you can use Iconkit:

<!-- +page.svelte or component.svelte -->

<script>
  import { Icon } from '@liquidiqq/iconkit'
</script>

<Icon name="face-smile" />

---

Props

Name	Type	Default value	Description
Component props:
name	string	-	Name of icon, e.g. "gift" or "svelte-logo"
mode	string	outline	Sets mode of icon. Accepts: outline | solid | mini
strokeWidth	string	-	Sets current icon's stroke width
noDefaultSize	boolean	false	Disables current icon's global size (height and width)
Stroke global settings:
$defaultStrokeWidth	string	1.5	Sets global stroke width for all outline icons
$loadingStrokeWidth	string	-	If not set, gets $defaultStrokeWidth's value ("1.5")
Size global settings:
$defaultSizes	boolean	true	Disables global sizes for regular and mini
$regularSize	string	"h-6 w-6"	Sets global regular size
$miniSize	string	"h-5 w-5"	Sets global mini size

---

Documentation

Basic usage

<!-- +page.svelte or component.svelte -->

<script>
  import { Icon } from '@liquidiqq/iconkit'
</script>

<Icon name="face-smile" />

Icon sources and optimizations

All icons are manually optimized for SvelteKit and adopted to 24px by 24px, and 20px by 20px from Heroicons and Ionicons. Search icon names here until Iconkit's website is launched. Search major brand logo names here. Logo icon names are suffixed with -logo. For example, svelte-logo:

<script>
  import { Icon } from '@liquidiqq/iconkit'
</script>

<Icon name="svelte-logo" />
<Icon name="github-logo" />
<Icon name="discord-logo" />
<Icon name="apple-logo" />

Modes

All icons have outline, solid, and mini modes. If not defined, default is outline:

<Icon name="bell-alert" mode="solid" />

Global stroke width

To change the global stroke width, use the $defaultStrokeWidth store. For auto sub and unsub use the $ syntax:

<script>
  import { defaultStrokeWidth, Icon } from '@liquidiqq/iconkit'

  $defaultStrokeWidth = "4"
</script>

<Icon name="flag" />

This will change the stroke width of all icons across the app. It provides the flexibility to match your theme aesthetics. If you have a global place for your app settings, it's best to place it there, e.g. +layout.svelte, or any globalSettings file and initialize it in layout.

Single icon stroke width

To change a single icon's stroke width use the strokeWidth prop, this will only change the current icon's stroke width:

<script>
  import { Icon } from '@liquidiqq/iconkit'
</script>

<Icon name="credit-card" strokeWidth="2" />

---

Icon sizing

Global icon sizes

Icons are sized using Tailwindcss classes. Regular icon size is h-6 w-6 and mini icon size is h-5 w-5. To change these global sizes with Tailwindcss, use the $regularSize, and $miniSize stores:

<script>
  import { regularSize, miniSize } from '@liquidiqq/iconkit'

  $regularSize = "h-8 w-8"
  $miniSize = "h-7 w-7"
</script>

This will affect all icon sizes across your app. It gives you the ability to keep your design system intact.

If you are not using Tailwindcss, you can change the height and width values for h-6 w-6 and h-5 w-5 classes:

Warning Not recommended if Tailwindcss is installed, it may override Tailwindcss default classes.

/* do this only if you are NOT using tailwindcss */

/* --- Iconkit regular icon size --- */
.h-6 {
  height: 1.5rem; /* add your value */
}
.w-6 {
  width: 1.5rem; /* add your value */
}

/* --- Iconkit mini icon size --- */
.h-5 {
  height: 1.25rem; /* add your value */
}
.w-5 {
  width: 1.25rem; /* add your value */
}

If you have your own theme classes for sizing, assign them to $regularSize and $miniSize:

<!-- +layout.svelte -->

<script>
  import { regularSize, miniSize, Icon } from '@liquidiqq/iconkit'

  $regularSize = "your-theme-regular-size"
  $miniSize = "your-theme-mini-size"
</script>

<Icon name="fire" />
<Icon name="fire" mode="mini" />

/* your theme.css or app.css/postcss */

  .your-theme-regular-size {
    height: 2.5rem;
    width: 2.5rem;
  }
  .your-theme-mini-size {
    height: 2rem;
    width: 2rem;
  }

Single icon sizing

Simply add the noDefaultSize prop without assigning any value (shown below), now you can add height and width as you like, e.g. either through native attributes such as style or class. This will only change the current icon's size and not affect other icons, good for one-offs, e.g. hero section logo, card header logo, etc:

<Icon name="fire" class="h-12 w-12" noDefaultSize />

---

Colors

By default, colors are set to currentColor, which means the icon inherits the parent's color:

<div class="text-slate-500">
  <!-- Icon inherits parent's color -->
  <Icon name="gift" />
</div>

To assign a color to an icon:

<Icon name="globe" class="text-pink-500" />

Loading icon

A simple loading icon is shipped with Iconkit.

<Icon name="loading-circle" />

Change loading icon's stroke width

You can change the loading icon's global stroke width using the $loadingStrokeWidth store, this is a global setting and will affect all loading icons across the app:

<script>
  import { loadingStrokeWidth, Icon } from '@liquidiqq/iconkit'

  $loadingStrokeWidth = "2"
</script>

<Icon name="loading-circle" />

Change single loading icon's stroke width

To change the stroke width of a single loading icon, use the strokeWidth prop, this will not affect other loading icons:

<script>
  import { Icon } from '@liquidiqq/iconkit'
</script>

<Icon name="loading-circle" strokeWidth="2" />

Custom icons

Note Adding custom icons to Iconkit requires familiarity with SVG.

Custom icon sets

Iconkit offers 2 types of sets for users to add custom icons, brand and extra sets. Each type has 4 variants, the default variant, and the outline, solid, and mini variants.

The default variant is flexible. It takes any size and color, giving you the ability to add complex logos and icons in your app.

The other 3 variants outline, solid, and mini follow a strict API. They need to adhere to 24x24 and 20x20 in dimentions. It has the default color of currentColor. These properties are meant to be configured via the global props. Check the docs for more on props.

Variants

1- Default variant: is recommneded for:

• complex logos and icons
• any size but it should be specified via the viewBox key with a value in "0 0 0 0" pattern
• any color, flat or gradient

2- Outline, solid, and mini variants: is recommended for:

• UI development (similar to the icons shipped with Iconkit)
• strict size of 24x24 and 20x20 (for mini)
• color is set to currentColor by default, configurable via the global props

outline, solid, and mini Variants

Since the default variant does not require any prepping, you can simply add the viewBox, and svg data to the relevant icon set, in this case, brandIcons, or extraIcons, and you are good to go. The 3 other variants require minimal adjustment. Iconkit takes care of these adjustments under the hood. So if you skip them, they will be taken care of.

Remove the following attributes from the svg data of the outline, solid, and mini variants:

• fill attribute
• storke attribute
• stroke-width attribute

For example:

<path fill="#FF3E00" fill-rule="evenodd" clip-rule="evenodd" ... /> <!-- remove only fill, not the fill-rule and clip-rule -->

<path stroke="#09ff00" stroke-width="2" fill-rule="evenodd" clip-rule="evenodd" ... /> <!-- remove only stroke, and stroke-width -->

❌ INCORRECT:

<path fill="#FF3E00" fill-rule="evenodd" clip-rule="evenodd" ... />

✅ CORRECT:

<path fill-rule="evenodd" clip-rule="evenodd" ... />

In case if the above attributes are not removed from the svg data, Iconkit will remove them since these will be handled via the props.

Adjust viewBox for outline and solid variants:

• Adjust the viewBox to "0 0 24 24" of your icon in Figma or the software of your choice, if the icon is not 1:1, then either the height or width should be 24.

Adjust viewBox for mini variant:

• Adjust the viewBox to "0 0 20 20" of your icon in Figma or the software of your choice, if the icon is not 1:1, then either the height or width should be 20.

Choosing the right variant

You can add your custom icons (brand, or extra) as you like, but it's recommended to use the Brand icon sets for brand or site logos, yours or your client's. And use the Extra icon sets for custom icons required by your app, below are some tips:

• Client logo with colors - add to brandIcons
• My own brand logo in outline - add to brandOutline
• Pizza slice icon in outline and solid - add to extraOutline, and extraSolid
• Client logo in solid - add to brandSolid
• Small arrow down icon - if meets the mini variant requirements add to extraMini
• My client want his client's logo with colors - add to extraIcons
• Umbrella icon with 3 variants - add to extraOutline, extraSolid, and extraMini
• Different Github logo in color - add to extraIcons

This way, your custom icons will take a consistent shape and structure, and will be easily accessible via the <Icon name="my-custom-icon" /> component.

How to add custom icons

STEP 1:

Copy everything between the opening and closing <svg> tags:

<svg viewBox="0 0 48 120" >
<!-- COPY START -->
  <g>
  	<path ... />
  	<circle ... />
  </g>
  	<rect ... />
    <path ... />
  	...
<!-- COPY END -->
</svg>

STEP 2:

Paste your svg data inside the backticks of the path key in the correspoding icon set, in this case, brandIcons:

brandIcons.set({
	"your-brand-name": {
		path: `PASTE HERE`
	}
})

✅ CORRECT:

path: `<path ... /><circle ... /><rect ... />`

❌ INCORRECT:

// do not include the <svg> tags
path: `<svg><path ... /><path ... /><path ... />...</svg>`

Note If you forget to remove the openning and closing <svg> tags, Iconkit will remove them as it natively provides the <svg> wrapper with global props.

Then in your +page.svelte or component.svelte:

<script>
	import { Icon } from "@liquidiqq/iconkit"
</script>

<Icon name="your-brand-name" />

Anatomy of custom icon sets

brandIcons.set({        // icon set name, `brandIcons` `extraMini` etc
	"your-brand-name": {  // icon name, recommended naming convention: kebab-case, e.g. "brand", "brand-colored", "brand-main"
		viewBox: "",        // required only if your icon is not 24x24 e.g. "0 0 22 113", if it's 24x24, don't need to add this property
		path: `paste here`  // paste your svg data inside the backticks
	}
})

PRO TIP: Some svg datas are lengthy and hard to read, e.g.:

brandIcons.set({
    "icon-one": {
      path: `
        <path ...this part gets large with complex icons />
        <circle ... />
        <rect ... />
        ...
      `
    },
    "icon-two": {
      path: `
        <g>
          <path ...complex path />
          <path ...complex path />
          <path ...complex path />
          ...
        </g>
      `
    }
})

To make svg data more readable, you can put them in one line and turn on word-wrap with alt+z in vscode:

brandIcons.set({
    "icon-one": {
      path: `<path ... /><circle ... /><rect ... />`
    },
    "icon-two": {
      path: `<g><path ... /><path ... /><path ... />...</g>`
    }
})

Or even better:

brandIcons.set({
    "icon-one": {path: `<path ... /><circle ... /><rect ... />`},
    "icon-two": {path: `<g><path ... /><path ... /><path ... />...</g>`}
})

Browsing icons

Iconkit website coming soon.

License

MIT.