svelte-svg-loader
Webpack loader to transform SVGs into Svelte components.
It also optimizes your SVGs by running them thru svgo.
This package is not published to NPM at this point in time.
<script>
import MyIcon from 'assets/my-icon.svg';
</script>
<MyIcon width={42} height={42} />
webpack.config.js
module.exports = {
//...
module: {
rules: [
{
test: /\.svg$/,
use: [
{
loader: 'svelte-svg-loader',
options: {
svgoConfig: {},
ssr: false,
},
},
],
},
],
},
};
Note: If you are amending an existing Webpack config, make sure to remove the default loader for assets (which includes svgs), or place svelte-svg-loader
before it in the loaders array.
// Remove default SVG loader
config.module.rules = config.module.rules.filter(l => l.test && !l.test.toString().includes('svg'));
This plugin is based on the work from the following projects:
MIT