使用svg-sprite-loader 遇到的问题

安装 svg-sprite-loader

npm install svg-sprite-loader --save

封装组件

目录结构

.
│  App.vue
│  main.js
├─components
│  └─SvgIcon
│          index.vue
│               
├─router
│      index.js
│      
├─store
│      actions.js
│      index.js
│      mutations.js
│      
├─svgIcons
│  │  index.js
│  │  
│  └─svg
│          certification.svg
│

给看官老爷奉上code

cd src/components/SvgIcon/index.vue
<template>
    <svg :class='svgClass' aria-hidden="true" v-on="$listeners">
        <use :xlink:href='iconName' />
    </svg>
</template>

<script>
export default {
    name: "SvgIcon",
    props: {
        iconClass: {
            type: String,
            required: true
        },
        className: {
            type: String,
            default: ""
        }
    },
    computed: {
        iconName () {
            return `#icon-${this.iconClass}`
        },
        svgClass () {
            if(this.className){
                return "svg-icon " + this.className
            }else{
                return "svg-icon"
            }
        }
    }
}
</script>
    
<style>
    .svg-icon{
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
</style>
cd src/svgIcons/index.js
import Vue from "vue"
import SvgIcon from "@/components/SvgIcon"

Vue.component("svg-icon",SvgIcon);

const req = require.context("./svg",false,/\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
src/svgIcons/svg/xxx.svg
cd src/main/js
import './svgIcons'

修改webpack配置

  • 增加loader

    {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/svgIcons')],
        options: {
            symbolId: 'icon-[name]'
        }
    }
    
.. admonition:: 提示

     - 如果url-loader 已经引入了 svg 需要先排除(exclude),如下代码。
     
     
{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    exclude: [resolve('src/svgIcons')],
    options: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
}

到此准备工作全部就绪,如何在业务代码里使用?必杀技 :

<svg-icon icon-class='xxx' class="" style=""></svg-icon>

<p style="color: #FFB6C1">一招毙命 , 打完收工,✿✿ヽ(°▽°)ノ✿</p>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容