seroy / svelte-icon

SVG [icon] string styler for svelte

Svelte-Icon

Load, resize and recolor svg icons (or images) in svelte.

If you want to use a svg icon package (like Zondicons and Eva Icons), this is the library for you.

Typescript ready!

Installation

npm install --save-dev svelte-icon

Examples

DEMO

<script>
  import Icon from 'svelte-icon'
  import menu from './img/zondicons/menu.svg'
  import airplane from './img/zondicons/airplane.svg'
</script>

<style>
  .orange { color: orange; }
</style>

<Icon data={menu} />
<Icon data={menu} size="80px" />
<Icon data={menu} color="red" />
<Icon data={airplane} fill="blue" stroke="black" />
<div class="item orange"> <Icon data={menu} /> </div>
<Icon data={menu} class="inline" />  <!-- you can pass class (or anything else) using $$restProps -->

Setup

SvelteKit

Simply import the svg file as a raw string using vite's raw import, eg.:

<script>
  import Icon from 'svelte-icon/Icon.svelte';
  import logo from '$lib/img/logo.svg?raw';
</script>

<Icon data={logo} size="40px" stroke=white />

Rollup

If using rollup, must be used together with rollup-plugin-string.

npm i -D rollup-plugin-string

// rollup.config.js
// ...
import { string } from 'rollup-plugin-string'

export default {
  // ...
  plugins: [
    resolve(),
    string({
      include: 'src/img/**/*.svg',
    }),
    // ...
  },
}

Webpack

For webpack, use with raw-loader,

// webpack.config.js
// ...
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /src\/img\/.*svg$/i,
        use: 'raw-loader',
      },
      // ...
    ]
  },
}

Sapper

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), using the following option:

      url({
        exclude: 'src/img/**/*.svg', // <- ignore files being processed by rollup-plugin-string
	sourceDir: path.resolve(__dirname, 'src/node_modules/images'),
        \\...

You need to add this to both client and server configuration

Checkout this example config for a complete example.

Options

interface SvelteIconProps {
  data: string
  viewBox?: string

  size?: string
  width?: string
  height?: string

  color?: string
  stroke?: string
  fill?: string

  [key: string]: unknown // $$restProps
}