@lagunovsky/svelte-svg-pre-loader

svelte-svg-pre-loader

Prepares SVG for loading with a svelte-loader

Installation

# using npm
npm i -D @lagunovsky/svelte-svg-pre-loader

# using yarn
yarn add -D @lagunovsky/svelte-svg-pre-loader

Usage

// 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>

Options

svgo

SVGO options. Some plugins cannot be disabled.

Default: { plugins: [ 'preset-default', 'removeStyleElement', 'removeDimensions'] }

withAction

Adds the use:action directive to an imported svg element.

Default: false