vite-plugin-vue-svg

    0.1.0 • Public • Published

    vite-plugin-vue-svg

    Extend Vite with ability to use SVG files as Vue components.

    Features:

    • SVGO optimization
    • Hot Module Replacement support
    • Support for ?url and ?component query string

    Currently supported Vite version:

    2.0.0-beta.61

    Install

    yarn add --dev vite-plugin-vue-svg @vue/compiler-sfc
    
    npm i -D vite-plugin-vue-svg @vue/compiler-sfc

    Setup

    // vite.config.js
    const vue = require('@vitejs/plugin-vue');
    const vueSvgPlugin = require('vite-plugin-vue-svg');
    
    module.exports = {
      plugins: [
        vue(),
        vueSvgPlugin(),
      ],
    };

    Options

    vueSvgPlugin({
      // Default behavior when importing `.svg` files, possible options are: 'url' and `component`
      defaultExport: 'url',
    
      // SVGO configuration object
      svgoConfig: {},
    })

    Usage

    <template>
      <div>
        <MyIcon />
      </div>
    </template>
    <script>
    import MyIcon from './svgs/my-icon.svg?component';
    
    export default {
      components: {
        MyIcon,
      },
    };
    </script>

    Install

    npm i vite-plugin-vue-svg

    DownloadsWeekly Downloads

    214

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    4.38 kB

    Total Files

    4

    Last publish

    Collaborators

    • visualfanatic