svg-sprite-loader ( svg-icon) 使用

svg-sprite-loader 可以多个svg图标合并. 使用时只需根据合并的symbol的id即可.

</svg>

// 项目使用Vue CLI 搭建

1. 首先 svg-sprite-loader

npm install -D svg-sprite-loader

2. 更改vue.config.js webpack的配置

chainWebpack: config => {

        config.module.rules.delete('svg'); //重点:删除默认配置中处理svg,

        config.module

            .rule('svg-sprite-loader')

            .test(/\.svg$/)

            .include.add(resolve('src/assets/icons/svg')) //处理svg目录

            .end()

            .use('svg-sprite-loader')

            .loader('svg-sprite-loader')

            .options({

                symbolId: 'icon-[name]',

            });

    }

由于更改了svg的处理方式, 如果不是所有svg都处理成svgicon还要添加 svg的处理

configureWebpack: {

        module: {

            rules: [

                {

                    test: /\.(svg)(\?.*)?$/,

                    exclude: [resolve('src/assets/icons')],

                    use: [

                        {

                            loader: 'file-loader',

                            options: {

                                name: 'img/[name].[hash:8].[ext]',

                            },

                        },

                    ],

                },

            ],

        },

    }

* 注意以上路径的区别.

3. 一个一个导入svg太麻烦. 没错有办法.

import Vue from 'vue';

import svgIcon from './svgIcon.vue';

Vue.component(svgIcon.name, svgIcon);

const req = require.context('@/assets/icons', true, /\.svg$/);

const requireAll = requireContext => requireContext.keys().map(name => requireContext(name));

requireAll(req);

导入指定目录下的所有svg文件.

4. 当然也可以注册一个全局组件 ,使用时更加简洁.

<template>

    <svg class="svg-icon" aria-hidden="true" v-on="$listeners">

        <use :xlink:href="name" />

    </svg>

</template>

巴特西

svg-sprite-loader ( svg-icon) 使用

最新文章

热门文章