vue中使用svg

川长思鸟来 2022-12-05 00:43 212阅读 0赞

首先使用vue cli3.x初始化一个基础框架

##### 新建svg组件 #####

<template>
        <svg :class="svgClass" aria-hidden="true">
            <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 scoped> .svg-icon { width: 1em; height: 1em; overflow: hidden; vertical-align: -0.15em; fill: currentColor; } </style>

#### 全局注册svg组件 ####

在src下新建一个icons文件夹用来存svg  
src/icons/svg中存放svg  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMDgxODQx_size_16_color_FFFFFF_t_70_pic_center]

// src/icons/index.js
    import Vue from 'vue'
    import SvgIcon from '@/components/SvgIcon/index.vue' // svg组件
    
    // 注册组件
    Vue.component('svg-icon', SvgIcon)
    // 自动引入所有的svg,避免手动引入
    const req = require.context('./svg', false, /\.svg$/)
    const requireAll = requireContext => requireContext.keys().map(requireContext)
    requireAll(req)

#### 在main.js中引入icons ####

// main.js
    import './icons/index.js' // icon

#### 添加svg配置 ####

安装插件

cnpm i svg-sprite-loader -D

配置

// vue.config.js
    /* eslint-disable @typescript-eslint/no-var-requires */
    const path = require('path')
    const resolve = dirPath => path.join(__dirname, './', dirPath) // 这里注意目录结构, icons和vue.config.js在同级,所以是 ./
    
    module.exports = { 
        chainWebpack: config => { 
            /** svg */
            const svgRule = config.module.rule('svg') // 找到svg-loader
            svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后
            svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录
            svgRule.include.add(resolve('src/icons'))
            svgRule // 添加svg新的loader处理
                .test(/\.svg$/)
                .use('svg-sprite-loader')
                .loader('svg-sprite-loader')
                .options({ 
                    symbolId: 'icon-[name]'
                })
    
            // 修改images loader 添加svg处理
            const imagesRule = config.module.rule('images')
            imagesRule.exclude.add(resolve('src/icons'))
            imagesRule.test(/\.(png|jpe?g|gif|webp|svg)(\?.*)?$/)
            /** svg end */
        }
    }

*Tip: svg格式如下*

<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M121.718 73.272v9.953c3.957-7.584 6.199-16.05 6.199-24.995C127.917 26.079 99.273 0 63.958 0 28.644 0 0 26.079 0 58.23c0 .403.028.806.028 1.21l22.97-25.953h13.34l-19.76 27.187h6.42V53.77l13.728-19.477v49.361H22.998V73.272H2.158c5.951 20.284 23.608 36.208 45.998 41.399-1.44 3.3-5.618 11.263-12.565 12.674-8.607 1.764 23.358.428 46.163-13.178 17.519-4.611 31.938-15.849 39.77-30.513h-13.506V73.272H85.02V59.464l22.998-25.977h13.008l-19.429 27.187h6.421v-7.433l13.727-19.402v39.433h-.027zm-78.24 2.822a10.516 10.516 0 0 1-.996-4.535V44.548c0-1.613.332-3.124.996-4.535a11.66 11.66 0 0 1 2.713-3.68c1.134-1.032 2.49-1.864 4.04-2.468 1.55-.605 3.21-.908 4.982-.908h11.292c1.77 0 3.431.303 4.981.908 1.522.604 2.85 1.41 3.986 2.418l-12.26 16.303v-2.898a1.96 1.96 0 0 0-.665-1.512c-.443-.403-.996-.604-1.66-.604-.665 0-1.218.201-1.661.604a1.96 1.96 0 0 0-.664 1.512v9.071L44.364 77.606a10.556 10.556 0 0 1-.886-1.512zm35.73-4.535c0 1.613-.332 3.124-.997 4.535a11.66 11.66 0 0 1-2.712 3.68c-1.134 1.032-2.49 1.864-4.04 2.469-1.55.604-3.21.907-4.982.907H55.185c-1.77 0-3.431-.303-4.981-.907-1.55-.605-2.906-1.437-4.041-2.47a12.49 12.49 0 0 1-1.384-1.512l13.727-18.217v6.375c0 .605.222 1.109.665 1.512.442.403.996.604 1.66.604.664 0 1.218-.201 1.66-.604a1.96 1.96 0 0 0 .665-1.512V53.87L75.97 36.838c.913.932 1.66 1.99 2.214 3.175.664 1.41.996 2.922.996 4.535v27.011h.028z"/></svg>

#### 使用 ####

<svg-icon icon-class="404" />

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMDgxODQx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/ba48342a1c994694a999d4abcf9d17e0.png