Prepares SVG for loading with a svelte-loader
# using npm
npm i -D @lagunovsky/svelte-svg-pre-loader
# using yarn
yarn add -D @lagunovsky/svelte-svg-pre-loader
// webpack.config.ts
import type { Options } from '@lagunovsky/svelte-svg-pre-loader'
module.exports = {
module: {
rules: [
{
test: /.svg$/,
use: [
{ loader: 'svelte-loader' },
{ loader: 'svelte-svg-pre-loader', options: { withAction: true } as Options },
],
},
],
},
};
<!-- index.svelte -->
<Dog width="100px" height="30px"/>
<Cat {action} class="interactive"/> <!-- requires css-modules -->
<script lang="ts">
import type { SvelteSVGAction } from '@lagunovsky/svelte-svg-pre-loader'
import Dog from './dog.svg'
import Cat from './cat.svg'
const action: SvelteSVGAction = (node) => {
node.addEventListener('click', () => alert('meow'))
}
</script>
<style module>
.interactive {
cursor: pointer;
}
</style>
SVGO options. Some plugins cannot be disabled.
Default: { plugins: [ 'preset-default', 'removeStyleElement', 'removeDimensions'] }
Adds the use:action directive to an imported svg element.
Default: false