Svelte Icon

Overview:

Svelte-Icon is a library that allows you to load, resize, and recolor SVG icons or images in Svelte. It is a suitable choice if you want to use a SVG icon package like Zondicons and Eva Icons. The library is also Typescript ready.

Features:

• Load, resize, and recolor SVG icons or images
• Supports popular SVG icon packages like Zondicons and Eva Icons
• Typescript ready for easy integration with your Typescript projects

Installation:

To install Svelte-Icon, you can follow the steps below:

SvelteKit:

1. Import the SVG file as a raw string using Vite’s raw import. For example:

import { svg } from "svelte-icong"
import Icon from "./path/to/Icon.svg"

const iconString = svg`${Icon}`

Rollup:

1. If you’re using Rollup, you must use it together with the rollup-plugin-string.
2. Install the rollup-plugin-string package:

npm install rollup-plugin-string --save-dev

3. Import the SVG file as a raw string using the rollup-plugin-string. For example:

import { svg } from "svelte-icong"
import Icon from "./path/to/Icon.svg"

const iconString = svg`${Icon}`

Webpack:

1. For Webpack, you can use it with the raw-loader.
2. Install the raw-loader package:

npm install raw-loader --save-dev

3. Import the SVG file as a raw string using the raw-loader. For example:

import { svg } from "svelte-icong"
import Icon from "raw-loader!./path/to/Icon.svg"

const iconString = svg`${Icon}`

Sapper:

1. If your rollup.config.js is using the url plugin (modern sapper template), you need to disable it for icons used by this package (processed by the string plugin actually).
2. Add the following option to disable the url plugin for icons in both client and server configuration:

plugins: [
  replace({
    preventAssignment: true,
    "process.browser": true,
  }),
  svg({
    /* options */
  }),
  url({
    exclude: [
      /\.svg$/,
    ],
    /* options */
  }),
  /* other plugins */
]

Make sure to check out the example configuration provided by the library for a complete example of how to configure Svelte-Icon.

Summary:

Svelte-Icon is a versatile library that makes it easy to load, resize, and recolor SVG icons or images in Svelte. With support for popular icon packages and Typescript integration, it offers a convenient solution for working with icons in your Svelte projects. The library provides clear installation instructions and configuration examples for different build tools, making it accessible to a wide range of developers.