Noisy Pterodactyl Melodies

    vite-plugin-svg

    0.7.0 • Public • Published

    vite-plugin-svg

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

    Features:

    • SVGO optimization
    • Hot Module Replacement support
    • Default SVG import behavior support

    Currently supported Vite version:

    1.0.0-rc.4

    Install

    yarn add --dev vite-plugin-svg
     
    npm i -D vite-plugin-svg

    Usage

    Starting from v0.4.0 to use SVG file as a component, just import VueComponent from the path of the file. This gives you more control over how a particular SVG file should be loaded and processed:

    // Get URL to SVG file
    import myIconUrl from './svgs/my-icon.svg';
     
    const img = document.createElement('img');
    img.src = myIconUrl;
    .my-icon {
      /* Get URL to SVG file */
      background-image: url("./svgs/my-icon.svg");
    }
    <template>
      <div>
        <MyIcon />
      </div>
    </template>
    <script>
    import { VueComponent as MyIcon } from './svgs/my-icon.svg';
     
    export default {
      components: {
        MyIcon,
      },
    };
    </script>

    Setup

    vite.config.js

    const svgPlugin = require('vite-plugin-svg');
     
    module.exports = {
      plugins: [
        svgPlugin(),
      ],
    };

    TODO:

    • Convert plugin to TS
    • Support disabling SVGO
    • Basic test coverage

    Install

    npm i vite-plugin-svg

    DownloadsWeekly Downloads

    299

    Version

    0.7.0

    License

    MIT

    Unpacked Size

    4.49 kB

    Total Files

    4

    Last publish

    Collaborators

    • visualfanatic