Best Way To Import Svg Icons Into A Svelte App

June 28, 2023 Post a Comment

I have about 80 custom SVG icons that I'm importing into a Svelte front-end app. Building on https://github.com/sveltejs/template, it's built with Rollup and includes Typescript, T

Solution 1:

The following approach has these advantages:

One central point to maintain all your icons for your app
Reduced network requests for fetching SVG icons
Reusable icons throughout the app without having duplicate svg elements

Have a dedicated Icon.svelte component setup like this:

<script>
    exportlet name;
    exportlet width = "1rem";
    exportlet height = "1rem";
    exportlet focusable = false;
    let icons = [
        {
          box: 24,
          name: "save",
          svg: `<g stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><path d="M17 21v-8H7v8"/><path d="M7 3v5h8"/></g>`
        },
        {
          box: 32,
          name: "trash",
          svg: `<path d="M12 12h2v12h-2z" /><path d="M18 12h2v12h-2z" /><path d="M4 6v2h2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h2V6zm4 22V8h16v20z" /><path d="M12 2h8v2h-8z" />`
        }
    ];
    let displayIcon = icons.find((e) => e.name === name);
</script>
<svg
  class={$$props.class}
  {focusable}
  {width}
  {height}
  viewBox="0 0 {displayIcon.box} {displayIcon.box}">{@html displayIcon.svg}</svg>

You can then use it like so:

<Icon name="trash"class="this-is-optional" />

Solution 2:

You can just change the file extension to .svelte and import an SVG as a normal component.

Solution 3:

another way is to use a symbol defs file (ex: icons.svg) in your public folder. then in your code do something like this :

Icon.svelte

<script>exportlet name;
    exportlet width = "1.5rem";
    exportlet height = "1.5rem";
    exportlet focusable = false;
</script><svgclass={$$props.class} {focusable} {width} {height}><usehref={`/icons.svg#${name}`} /></svg>

icons.svg

<svgaria-hidden="true"style="position: absolute; width: 0; height: 0; overflow: hidden;"version="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><defs><symbolid="icon-warning"viewBox="0 0 20 20"><pathd="M19.511 17.98l-8.907-16.632c-0.124-0.215-0.354-0.348-0.604-0.348s-0.481 0.133-0.604 0.348l-8.906 16.632c-0.121 0.211-0.119 0.471 0.005 0.68 0.125 0.211 0.352 0.34 0.598 0.34h17.814c0.245 0 0.474-0.129 0.598-0.34 0.124-0.209 0.126-0.469 0.006-0.68zM11 17h-2v-2h2v2zM11 13.5h-2v-6.5h2v6.5z"></path></symbol></defs></svg>

App.svelte

<Iconname="icon-warning" />

this way you use one http call to load svg file. and then just use the part you need in markup.

Solution 4:

A working solution is to hold the SVGs in a separate IconService.js:

export const chevron_down ="<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-chevron-down\"><polyline points=\"6 9 12 15 18 9\"></polyline></svg>";

export const chevron_right ="<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-chevron-right\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>";

This can easily be imported and used within svelte @html function.

<script>import {chevron_down, chevron_right} from'IconService';
</script>

{@html chevron_down}

Solution 5:

Using like {@html SVG_CODE} for rendering a svg code from another component or variable is a Bad choice . This gives risk of XSS and other attacks . check : https://github.com/sveltejs/svelte/issues/2545

I think using plugin like rollup-plugin-svelte-svg(https://www.npmjs.com/package/rollup-plugin-svelte-svg) would be a better choice

1.Install using npm

npm i -D rollup-plugin-svelte-svg

2.Simply call svelteSVG before svelte in your rollup config.


export default {
    
    plugins: [
        svelteSVG({
            // optional SVGO options// pass empty object to enable defaults
            svgo: {}
        }),
    ],
    ...
}

3.You can then import svg in your JS thusly:

<script>importLogofrom"./logo.svg";
</script><Logowidth=20 />

JavaScript Guide