cristovao-trevisan / svelte-icon Goto Github PK

View Code? Open in Web Editor NEW

31.0 2.0 6.0 156 KB

SVG [icon] string styler for svelte

Home Page: https://cristovao-trevisan.github.io/svelte-icon/

License: MIT License

JavaScript 10.70% Svelte 78.19% HTML 6.53% TypeScript 4.57%

svelte icon svg svg-icon

svelte-icon's Introduction

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
}

svelte-icon's People

Contributors

Stargazers

Watchers

Forkers

obieq stboyden seroy oneezy omerunaldii nrthbound

svelte-icon's Issues

Migrate to sveltekit library

fix link to zondicons

I'm just reporting that the link to the Zondicons website is broken in the readme, and leads to a 404 GitHub page.

Thanks

Vite Config

Any idea for Vite config to make it working with Svelte?

Regex for removing svg doesn't support line breaks

SVGs formatted like this

<svg
   width="100"
   height="100"

are not parsed by

  $: elements = data
    .replace(/<svg ([^>]*)>/, '')

and the svg element is nested in svelte-icon's svg, preventing display.
This regex currently expects a space char to be present after tag start.

Workaround is to preprocess the svg text to convert line breaks to spaces.

Title support

Currently the text shown on hover comes from the name of the SVG file passed to the data prop. It would be nice if we could support custom titles (in the generated <title> tag) through a prop.

Asvelte4 compatibility issue

When I upgraded to svelte4, the component I referenced instead of displaying an icon was rendered to the page as below。

Here's my reference to the component

<script>
import Icon from 'svelte-icon/Icon.svelte'
import thumbUp from "$lib/asset/svg/thumb-up.svg?row";
</script>
<div>
<Icon data={thumbUp}/>
</div

This is the rendered result

<div>
<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 20 20" stroke="currentColor" fill="currentColor">/src/lib/asset/svg/thumb-up.svg?row</svg>
</div>

requesting webpack version

Hi,
I am using webpack, but your offering uses rollup. Is it possible for us to get a webpack offering?

Thanks

Please get rid of the svelte warning when using this library

10:34:01 AM [vite-plugin-svelte] WARNING: The following packages have a svelte field in their package.json but no exports condition for svelte.

[email protected]

Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition for details.

Please update it, should be really easy.

Does not work with Sapper

Hi,

I have followed the docs and as soon as I want to use the Icon component in my Sapper App it doesn't work and all I can see is only this error:

export { default } from './Icon.svelte'
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (internal/modules/cjs/loader.js:1117:16)
    at Module._compile (internal/modules/cjs/loader.js:1165:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1221:10)
    at Module.load (internal/modules/cjs/loader.js:1050:32)
    at Function.Module._load (internal/modules/cjs/loader.js:938:14)
    at Module.require (internal/modules/cjs/loader.js:1090:19)
    at require (internal/modules/cjs/helpers.js:75:18)
    at Object.<anonymous> (/home/mateusz.kwiatkowski/Playground/sapper-demo/__sapper__/dev/server/server.js:11:1)
    at Module._compile (internal/modules/cjs/loader.js:1201:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1221:10)

Usage:

<script>
  import Icon from "svelte-icon";
  import arrow from "@/assets/icons/arrow-up.svg";
</script>

<Icon data={arrow} />

Rollup config:

...
string({
  include: "src/assets/icons/*.svg",
}),
...