unplugin-svgo v0.0.3

unplugin-svgo

plugin to load and optimize SVG files as raw string. For the optimization SVGO is used.

Features

• ☕️ Simplify SVG icons with SVGO and automatically add prefixes to avoid icon conflicts.
• 💚 Supports both Vue and React out-of-the-box.
• ✨ Supports both import components(Vue/React) or svg file.
• 🦾 Full TypeScript support.
• 😃 Works perfectly with @unocss/preset-icons or unplugin-icons.

Installation

npm i unplugin-svgo -D

// vite.config.ts
import Svgo from 'unplugin-svgo/vite'

export default defineConfig({
  plugins: [
    Svgo({ /* options */ }),
  ],
})

// rollup.config.js
import Svgo from 'unplugin-svgo/rollup'

export default {
  plugins: [
    Svgo({ /* options */ }),
  ],
}

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-svgo/webpack')({ /* options */ }),
  ],
}

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-svgo/webpack')({ /* options */ }),
    ],
  },
}

// esbuild.config.js
import { build } from 'esbuild'

build({
  /* ... */
  plugins: [
    require('unplugin-svgo/esbuild')({
      /* options */
    }),
  ],
})

Import params

Raw

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

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

Component

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

It can be specified to use the component type, which defaults to the template component. To use JSX, you can use component=jsx.

import IconTempComponent1 from './my-icon.svg?component'
import IconTempComponent2 from './my-icon.svg?component=template'
import IconJsxComponent from './my-icon.svg?component=jsx'

Skip SVGO helper

SVGO can be explicitly enable or disabled for one file by adding the ?svgo=[enable] suffix:

import IconJsxComponent from './my-icon.svg?component=jsx&svgo=false'

Configuration

SVGO has a plugin-based architecture, separate plugins allows various xml svg optimizations. See built-in plugins. SVGO automatically loads configuration from svgo.config.js|ts|json. Some general options can be configured via CLI.

import { defineConfig } from 'unplugin-svgo'
import { prefixIds, presetDefault, sortAttrs } from 'unplugin-svgo/plugins'

export default defineConfig({
  multipass: true, // boolean. false by default
  datauri: 'enc', // 'base64' (default), 'enc' or 'unenc'.
  plugins: [
    // set of built-in plugins enabled by default
    presetDefault(),
    // enable built-in plugins by name
    prefixIds(),
    // or by expanded notation which allows to configure plugin
    sortAttrs({
      xmlnsOrder: 'alphabetical',
    })
  ]
})

Unocss (preset-icons)

unplugin-svgo provides a custom loader for @unocss/preset-icons, which makes it easy to optimize icons for use in Unocss without the need to load unplugin-svgo.

If you use unplugin-icons, the FileSystemIconLoader still works on unplugin-icons.

import Icons from '@unocss/preset-icons'
import { FileSystemIconLoader } from 'unplugin-svgo/loaders'

const loader = FileSystemIconLoader('./src/assets/iconfonts', {
  /* options */
})

Unocss({
  presets: [
    Icons({
      collections: { custom: loader }
    })
  ]
})

Use:

<!-- ./src/assets/iconfonts/user.svg -->
<div class="i-custom-user"></div>

Use with TypeScript

If you use unplugin-svgo in Typescript, you need to set the tsconfig.json

{
  "compilerOptions": {
    "types": [
      "unplugin-svgo/client"
    ]
  }
}