search

oliverfindl / vue-svg-inline-loader

Webpack loader used for inline replacement of SVG images with actual content of SVG files in Vue projects.
MIT License
124 stars 18 forks source link
gridsome inline javascript laravel-mix loader nuxt nuxtjs quasar quasar-framework sprites svg svgo symbols vue vue-cli vue-svg-inline-loder vuejs webpack webpack-loader

readme

vue-svg-inline-loader

version downloads license paypal

Webpack loader used for inline replacement of SVG images with actual content of SVG files in Vue projects.

Loader parses only HTML template format.

Loader has built-in SVGO support for SVG optimization.

Sprite option works only with Vue Single File Component approach.

Vue CLI

Vue 3 projects created via Vue CLI aren't built on top of Webpack, they use Vite (which is build on top of Rollup) instead. In this case, this loader won't work. Please take a look at vue-svg-inline-plugin, which works similar to this loader.

Notable changes

Install

Via npm [package]:

$ npm install vue-svg-inline-loader --save-dev

Via yarn [package]:

$ yarn add vue-svg-inline-loader --dev

Usage

With webpack - webpack.config.js (recommended): 

// webpack

module.exports = {
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: [
                    {
                        loader: "vue-loader",
                        options: { /* ... */ }
                    },
                    {
                        loader: "vue-svg-inline-loader",
                        options: { /* ... */ }
                    }
                ]
            }
        ]
    }
};

With vue-cli - vue.config.js:
With gridsome - gridsome.config.js:
With quasar - quasar.conf.js: 

// vue-cli, gridsome, quasar

module.exports = {
    chainWebpack: config => {
        config.module
            .rule("vue")
            .use("vue-svg-inline-loader")
                .loader("vue-svg-inline-loader")
                .options({ /* ... */ });
    }
};

With nuxt - nuxt.config.js: 

// nuxt

module.exports = {
    buildModules: [ 
        [ "vue-svg-inline-loader/nuxt", { /* options */ } ]
    ],
    // or
    buildModules: [ "vue-svg-inline-loader/nuxt" ],
    vueSvgInlineLoader: {
        /* options */
    }
};

With quasar - quasar.conf.js: 

// quasar

module.exports = {
    build: {
        extendWebpack(config) {
            const vueRule = config.module.rules.find(({ test }) => test.toString() === /\.vue$/.toString());
            vueRule.use.push({
                loader: "vue-svg-inline-loader",
                options: { /* ... */ }
            });
        }
    }
};

With laravel-mix - webpack.mix.js:

// laravel-mix

const mix = require("laravel-mix");

mix.override(config => {
    config.module.rules.push({
        test: /\.vue$/,
        use: [{
            loader: "vue-svg-inline-loader",
            options: { /* ... */ }
        }]
    })
});

Basic inline SVG usage with svg-inline keyword directive:

<img svg-inline class="icon" src="https://github.com/oliverfindl/vue-svg-inline-loader/raw/master/images/example.svg" alt="example" />

Which replaces into:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="..." svg-inline role="presentation" focusable="false" tabindex="-1" class="icon">
    <path d="..."></path>
</svg>

Basic inline SVG sprite usage with svg-sprite keyword directive:

<img svg-inline svg-sprite class="icon" src="https://github.com/oliverfindl/vue-svg-inline-loader/raw/master/images/example.svg" alt="example" />

Which replaces into:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="..." svg-inline svg-sprite role="presentation" focusable="false" tabindex="-1" class="icon">
    <use xlink:href="#svg-sprite-md5hash" href="#svg-sprite-md5hash"></use>
</svg>
<!-- ... -->
<!-- will get injected right before root closing tag in Vue component -->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none !important;">
    <symbol id="svg-sprite-md5hash" xmlns="http://www.w3.org/2000/svg" viewBox="...">
        <path d="..."></path>
    </symbol>
    <!-- ... -->
</svg>

Notice

Loader won't parse any images with Vue bindings used as src attribute [more info].

If you need to preserve image tag (e.g. in comments), you can wrap it in hash (#) or triple backtick (```) characters.

Configuration

Default options:

{
    inline: {
        keyword: "svg-inline",
        strict: true
    },
    sprite: {
        keyword: "svg-sprite",
        strict: true
    },
    addTitle: false,
    cloneAttributes: ["viewbox"],
    addAttributes: {
        role: "presentation",
        focusable: false,
        tabindex: -1
    },
    dataAttributes: [],
    removeAttributes: ["alt", "src"],
    transformImageAttributesToVueDirectives: true,
    md5: true,
    xhtml: false,
    svgo: true,
/* value true for svgo option is alias for:
    svgo: {
        plugins: [
            {
                removeViewBox: false
            }
        ]
    },
*/
    verbose: false
}

Explanation:

Notices

Examples

License

MIT