//unplugin-svg-loaderbyMini-ghost

unplugin-svg-loader

1
0
1
TypeScript

@mini-ghost/unplugin-svg-loader

An unplugin that supports converting SVGs to base64 or extracting paths.

Installation

npm i @mini-ghost/unplugin-svg-loader
Vite
// vite.config.ts
import SvgLoader from '@mini-ghost/unplugin-svg-loader/vite'

export default defineConfig({
  plugins: [
    SvgLoader(),
  ],
})

Example: playground/


Rollup
// rollup.config.js
import SvgLoader from '@mini-ghost/unplugin-svg-loader/rollup'

export default {
  plugins: [
    SvgLoader(),
  ],
}


Webpack
// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('@mini-ghost/unplugin-svg-loader/webpack')()
  ]
}


Vue CLI
// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('@mini-ghost/unplugin-svg-loader/webpack')(),
    ],
  },
}


esbuild
// esbuild.config.js
import { build } from 'esbuild'
import SvgLoader from '@mini-ghost/unplugin-svg-loader/esbuild'

build({
  plugins: [SvgLoader()],
})


Usage

Base64

import unpluginBase64 from './assets/unplugin.svg?base64'
// 'data:image/svg+xml;base64,...'

Path

import unpluginPath from './assets/unplugin.svg?path'
// 'M256 0H0V256H256V0Z M72.9779 273.931L73.3264...'

*.svg?path is very useful for allowing Echarts to use some simple icons.

import simpleIconPath from './assets/simple.svg?path'

const legend = {
  data: [
    { name: 'unplugin', icon: `path://${simpleIconPath}` },
    // ...
  ]
}

License

MIT License © 2024-PRESENT Alex Liu

[beta]v0.14.0