Iconify for Svelte

In addition to SVG framework, Iconify offers native components for several popular UI frameworks. Iconify for Svelte is one of such components.

Yet another icon component? What are advantages over other icon components?

  • One syntax for over 70,000 icons from 80+ icon sets.
  • Renders SVG. Many components simply render icon fonts, which look ugly. Iconify renders pixel perfect SVG.

Installation

If you are using NPM:

npm install --save-dev @iconify/svelte

If you are using Yarn:

yarn add --dev @iconify/svelte

This package does not include icons. Icons are split into separate packages that available at NPM. See below.

Usage

Iconify for Svelte is a basic component. It works offline and does not have any dependencies. Icon data is provided as parameter to component.

Install @iconify/svelte and packages for selected icon sets. Import component from @iconify/svelte and icon data for icon you want to use:

// Import component
import IconifyIcon from '@iconify/svelte';

// Import icon data
// You can import icon with any name instead of 'home'
// because exports are not named
import home from '@iconify-icons/mdi-light/home';

Then use IconifyIcon component with imported icon's data as icon parameter:

<IconifyIcon icon={home} />

Sapper

Component is compatible with Sapper. Syntax is the same as with Svelte.

Properties

You can pass any custom properties to component.

Required properties:

Optional properties:

  • inline, boolean toggles inline or block mode.
  • width, string | number icon width.
  • height, string | number icon height.
  • hFlip, boolean flips icon horizontally.
  • vFlip, boolean flips icon vertically.
  • flip, string alternative to hFlip and vFlip.
  • rotate, number | string rotates icon.
  • color, string changes icon color.
  • hAlign horizontally aligns content inside icon.
  • vAlign vertically aligns content inside icon.
  • slice alignment behaviour: "meet" or "slice".
  • align, string aligns content inside icon, alternative to hAlign, vAlign and slice.

See below for more information on each optional property.

In addition to the properties mentioned above, the icon component accepts any other properties. All other properties will be passed to generated SVG element, so you can do stuff like setting the inline style, add title and so on.

In Svelte it is not possible to pass events to child components, so component does not handle any events. If you need to make an icon clickable, wrap it in a button or a link and assign an event to that button or link.

Icon

This is a basic component, it cannot retrieve icon data from Iconify API. That means you need to provide icon data yourself.

All icons available with Iconify components and Iconify SVG framework can be imported from NPM packages.

Each icon set has its own package that you need to install. Package names start with @iconify-icons/, followed by icon set prefix.

Each icon is stored in a separate file, so only icons you import are bundled. To import an icon, combine package name and icon name in import statement.

Examples:

  • mdi-light:login from Material Design Light Icons can be imported from @iconify-icons/mdi-light/login.
  • ri:login-circle-fill from Remix Icons can be imported from @iconify-icons/ri/login-circle-fill.
  • tabler:barcode from Tabler Icons can be imported from @iconify-icons/tabler/barcode.

...and so on.

Variable name in import statement is irrelevant because all exports are default exports.

CommonJS icon modules

Icons in icon packages are ES modules.

Sometimes you might need CommonJS module, for example, when importing icon data in Node.js.

There are alternative icon packages that use CommonJS modules: @iconify/icons-*. Icons are identical, the only difference is export method. To swap from ES package to CommonJS package, use "@iconify/icons-" before icon set prefix in package name instead of "@iconify-icons/".

For example, Material Design Icons are available as @iconify-icons/mdi with ES exports, as @iconify/icons-mdi with CommonJS exports.

Color

You can only change color of monotone icons. Some icons, such as emoji, have a hardcoded palette that cannot be changed.

To add color to a monotone icon simply change text color.

<IconifyIcon icon={home} style="color: red" />

For various ways to set color, see how to change icon color in Iconify for Svelte.

Dimensions and alignment

By default, icon height is set to "1em", icon width is changed dynamically based on the icon's width to height ratio. This makes it easy to change icon size by changing font-size in the stylesheet, just like icon fonts.

There are several ways to change icon dimensions:

  • Setting font-size in style.
  • Setting width and/or height property.

Values for width and height can be numbers or strings.

If you set only one dimension, another dimension will be calculated using the icon's width to height ratio. For example, if the icon size is 16 x 24, you set the height to 48, the width will be set to 32. Calculations work not only with numbers, but also with string values.

<Icon icon={home} style="font-size: 24px;" />

For various ways to change icon dimensions and alignment, see how to change icon dimensions in Iconify for Svelte.

Transformations

An icon can be rotated and flipped horizontally and/or vertically. All transformations are done relative to the center of the icon.

These are not CSS transformations, transformations are applied inside SVG.

For more details see how to transform icon in Iconify for Svelte.