https://github.com/jpkleemans/vite-svg-loader

Vite plugin to load SVG files as Vue components
https://github.com/jpkleemans/vite-svg-loader

svg vite vue

Last synced: about 2 months ago
JSON representation

Vite plugin to load SVG files as Vue components

• Host: GitHub
• URL: https://github.com/jpkleemans/vite-svg-loader
• Owner: jpkleemans
• License: mit
• Created: 2021-01-12T15:24:11.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-06-11T05:08:00.000Z (3 months ago)
• Last Synced: 2024-06-18T12:40:07.714Z (3 months ago)
• Topics: svg, vite, vue
• Language: JavaScript
• Homepage:
• Size: 633 KB
• Stars: 553
• Watchers: 8
• Forks: 57
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-vite - v3 - Load SVG files as Vue components. (Plugins / Vue)
• awesome-vite - v3 - Load SVG files as Vue components. (Plugins / Vue)

README

        
# Vite SVG loader

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









```vue

  

import MyIcon from './my-icon.svg'

```

### Install

```bash

npm install vite-svg-loader --save-dev

```

### Setup

#### `vite.config.js`

```js

import svgLoader from 'vite-svg-loader'

export default defineConfig({

  plugins: [vue(), svgLoader()]

})

```

### 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'

// 

```

### 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.

#### `vite.config.js`

```js

svgLoader({

  defaultImport: 'url' // or 'raw'

})

```

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

/// 

/// 

```

## Sponsors



  



Thanks to Nexxtmove for sponsoring the development of this project.  

Your logo or name here? [Sponsor this project](https://github.com/sponsors/jpkleemans).