Rollup Plugin Svelte Svg screenshot

Rollup Plugin Svelte Svg

Author Avatar Theme by Codefeathers
Updated: 17 May 2025
76 Stars

Import SVG files as Svelte Components

Overview

The rollup-plugin-svelte-svg is a Rollup plugin that allows you to import SVG files as Svelte components. It is a useful tool for developers who are working with SVG files and want to easily use them in their Svelte projects.

Features

  • Import SVG files as Svelte components
  • Seamless integration with Rollup
  • Supports Svelte, Sapper, and Vite frameworks
  • Optimizes SVG files using svgo

Installation

To install the rollup-plugin-svelte-svg, follow these steps:

  1. Add the plugin as a development dependency in your project:
npm install --save-dev rollup-plugin-svelte-svg
  1. Configure the plugin in your Rollup configuration file:
import svelteSVG from "rollup-plugin-svelte-svg";

export default {
  // ...
  plugins: [
    // ...
    svelteSVG(),
    // ...
  ],
  // ...
};
  1. Import SVG files in your JavaScript files like Svelte components:
import Icon from "./path/to/icon.svg";

Summary

The rollup-plugin-svelte-svg is a powerful tool for integrating SVG files as Svelte components in your projects. With its seamless integration with Rollup and support for various frameworks, it provides an easy and efficient way to work with SVG files in Svelte. Its optimization capabilities also ensure that your SVG files are optimized for performance.