svg-icon-jdc

说明

一款快速调用 svg 中 use id的模版，适合精灵图开发

使用说明

js部分

import svgIcon from 'svg-icon-jdc';
svgIcon.install(Vue);
// 倒入需要规范的 svg 文件
const req = require.context('./../../asset/svgSprite', false, /\.svg$/)
const requireAll = requireContext => {
    requireContext.keys().map(requireContext)
}
requireAll(req)

webpack部分 如果没有 file-loader 等文件路径工具只需要如下

{
    test: /\.svg$/,
    loader: 'svg-sprite-loader',
    include:[path.resolve('src/asset/svgSprite')],
    options:{
        symbolId:'icon-[name]'
    }
}

如果有 file/url 等文件路径路径工具 需要添加 对应的路径来忽略这个文件 exclude:[path.resolve('src/asset/svgSprite')] 下面是一个loader的配置例子

{
    test: /\.(png|jpg|gif|webp|woff|eot|ttf|svg)$/,
    use:{
        loader:'url-loader',
        options:{
            name:'img/[name].[ext]',
            limit:3000
        }
    },
    exclude:[path.resolve('src/asset/svgSprite')]
    
}