欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-07-09 21:11:47
svg-sprite-loader 可以多个svg图标合并. 使用时只需根据合并的symbol的id即可.

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

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

 

 <svg class="svg-icon" aria-hidden="true" v-on="$listeners">
        <use xlink:href="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>

 

 

 

上一篇： 造*了！NETCore跨平台UI框架，CPF

下一篇： Java之路---Day11(接口)

推荐阅读