https://github.com/fuxichen/rspack-plugin-svg

svg rspack plugin
https://github.com/fuxichen/rspack-plugin-svg

Last synced: 4 months ago
JSON representation

svg rspack plugin

• Host: GitHub
• URL: https://github.com/fuxichen/rspack-plugin-svg
• Owner: fuxichen
• License: mit
• Created: 2024-10-18T12:17:19.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-10-21T06:01:37.000Z (4 months ago)
• Last Synced: 2024-10-21T06:13:15.203Z (4 months ago)
• Language: TypeScript
• Size: 6.84 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-rspack - rspack-plugin-svg

README

        
# rsbuild-plugin-svg

Rsbuild plugin to load SVG files as Vue components, using SVGO for optimization.

Fork by [vite-svg-loader](https://github.com/jpkleemans/vite-svg-loader)



  

   

  

  

  



## Usage

Install:

```bash

npm add rsbuild-plugin-svg -D

```

Add plugin to your `rsbuild.config.ts`:

```ts

// rsbuild.config.ts

import { pluginSvg } from "rsbuild-plugin-svg";

export default {

  plugins: [pluginSvg()],

};

```

## Import params

### URL

SVGs can be imported as URLs using the `?url` suffix:

```js

import iconUrl from './my-icon.svg?url'

// 'data:image/svg+xml...'

```

### Raw

SVGs can be imported as strings using the `?raw` suffix:

```js

import iconRaw from './my-icon.svg?raw'

// '...'

```

### Component

SVGs can be explicitly imported as Vue components using the `?component` suffix:

```js

import IconComponent from './my-icon.svg?component'

// 

```

## Options

### Default import config

When no explicit params are provided SVGs will be imported as Vue components by default.

This can be changed using the `defaultImport` config setting,

such that SVGs without params will be imported as URLs (or raw strings) instead.

## defaultImport

```js

svgLoader({

  defaultImport: 'url' // or 'raw' default: 'component'

})

```

### SVGO Configuration

#### `vite.config.js`

```js

svgLoader({

  svgoConfig: {

    multipass: true

  }

})

```

### Disable SVGO

#### `vite.config.js`

```js

svgLoader({

  svgo: false

})

```

### Skip SVGO for a single file

SVGO can be explicitly disabled for one file by adding the `?skipsvgo` suffix:

```js

import IconWithoutOptimizer from './my-icon.svg?skipsvgo'

// 

```

### Use with TypeScript

If you use the loader in a Typescript project, you'll need to reference the type definitions inside `vite-env.d.ts`:

```ts

/// 

/// 

```

## License

[MIT](./LICENSE).