Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lagunovsky/svelte-svg-pre-loader
Prepares SVG for loading with a svelte-loader
https://github.com/lagunovsky/svelte-svg-pre-loader
Last synced: about 1 month ago
JSON representation
Prepares SVG for loading with a svelte-loader
- Host: GitHub
- URL: https://github.com/lagunovsky/svelte-svg-pre-loader
- Owner: lagunovsky
- License: mit
- Created: 2021-12-18T15:51:54.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2021-12-26T11:24:54.000Z (about 3 years ago)
- Last Synced: 2024-11-15T13:46:32.404Z (about 2 months ago)
- Language: TypeScript
- Homepage:
- Size: 24.4 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
![License](https://img.shields.io/github/license/lagunovsky/svelte-svg-pre-loader)
![TypeScript](https://img.shields.io/badge/typescript-%3E%3D4.0.0-blue)
![Tests workflow](https://github.com/lagunovsky/svelte-svg-pre-loader/actions/workflows/publish.yml/badge.svg)# svelte-svg-pre-loader
Prepares SVG for loading with a svelte-loader
## Installation
```bash
# using npm
npm i -D @lagunovsky/svelte-svg-pre-loader# using yarn
yarn add -D @lagunovsky/svelte-svg-pre-loader
```## Usage
```typescript
// webpack.config.tsimport 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 },
],
},
],
},
};
``````sveltehtml
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'))
}.interactive {
cursor: pointer;
}```
## Options
### svgo
[SVGO options](https://github.com/svg/svgo). Some plugins cannot be disabled.
Default: ```{ plugins: [ 'preset-default', 'removeStyleElement', 'removeDimensions'] }```
### withAction
Adds the [use:action](https://svelte.dev/docs#template-syntax-element-directives-use-action) directive to an imported svg element.
Default: `false`