gem-hunter
Language: TypeScript
Import SVG files as Svelte Components
Caution
This package is DEPRECATED. Svelte supports importing SVGs natively now. See: https://svelte.dev/playground/86553af5c35449ab88e34f1e50eb298f?version=5.30.1
Import SVG files as Svelte Components
Note:
rollup-plugin-svelte-svgwas rewritten from scratch recently, and no longer exposes Svelte options({ dev, generate })since we now delegate compilation to the Svelte plugin that's loaded after us. You should remove these options since they have no effect.This is a nonbreaking change for most users, however if you do face a problem, raise an issue.
# using npm npm i -D rollup-plugin-svelte-svg # using yarn yarn add -D rollup-plugin-svelte-svg # using pnpm pnpm i -D rollup-plugin-svelte-svg
Simply call svelteSVG before svelte in your rollup config.
// rollup.config.js import { svelteSVG } from "rollup-plugin-svelte-svg"; export default { entry: "src/input.js", dest: "dist/output.js", plugins: [ svelteSVG({ // optional SVGO options // pass empty object to enable defaults svgo: {} }), ], ... }
// rollup.config.js import { svelteSVG } from "rollup-plugin-svelte-svg"; export default { client: { plugins: [ svelteSVG({ // optional SVGO options // pass empty object to enable defaults svgo: {}, }), ], ... }, server: { plugins: [ svelteSVG({ // optional SVGO options // pass empty object to enable defaults svgo: {} }), ], ... }, }
// vite.config.js import { defineConfig } from "vite"; import { svelteSVG } from "rollup-plugin-svelte-svg"; export default defineConfig({ ... plugins: [ svelteSVG({ // optional SVGO options // pass empty object to enable defaults svgo: {}, // vite-specific // https://vitejs.dev/guide/api-plugin.html#plugin-ordering // enforce: 'pre' | 'post' enforce: "pre", }), ... ], });
You can then import svg in your JS thusly:
<script> import Logo from "./logo.svg"; </script> <Logo width=20 />
This plugin was originally forked from antony/rollup-plugin-svg, but has been rewritten since.
@featherbear's fork and metafy-gg's fork inspired svgo optimisation and vite support.
MIT