svg 组件

pinkanpurple

已于 2023-01-26 13:16:52 修改

阅读量727

点赞数

文章标签： javascript 前端 vue.js

于 2022-10-23 17:22:09 首次发布

本文链接：https://blog.csdn.net/fkkkkkf/article/details/127476186

版权

没有写svg组件时需要每次这样使用

没有：表示字符串这里传字符串过去就行

要想这样使用需要做两件事情 1.把svg-icon变成全局组件2.让webpack注册图标3.让webpack识别到图标读取出来（用loader）

第一步

<template>
<!-- 固定写法 -->
 <svg class="svg-icon" aria-hidden="true">
<!-- innerIcon 是通过接受外部传进来的值来选的 -->
    <use :xlink:href="innerIcon" />
  </svg>
</template>
<script setup>
import {computed} from 'vue'
 let props=defineProps({
    // 我要定义接受数据规则
    icon:{
          type:String,
          required:true
    }
 })
//对传进来的值进行处理
 let innerIcon=computed(()=>{
    //  "#icon-"是必须的 props.icon 要访问的图片名
    return "#icon-" + props.icon
 })
</script>
<style lang="scss" scoped>
// 在这里还要设置好图标大小 以后就免设置了
.svg-icon {
  overflow: hidden;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
}
</style>

第二步

// 在这里面对svg进行全局注册
import SvgIcon from "@/components/SvgIcon";
// 利用 webpack的require来注册 svg资源  
// 搜索目录  不搜索子目录  匹配文件
const svgRequire = require.context('./svg', false, /\.svg$/) // 返回require函数

// keys返回所有的 文件名 
svgRequire.keys().forEach(icon => {
    svgRequire(icon) // 完成webpack资源注册 
});
// npm i --save-dev svg-sprite-loader@6.0.9
export default (app) => {
    app.component('svg-icon', SvgIcon)
}

main.js

import installIcon from './icons'

const app = createApp(App)
installIcon(app)

第三步

const path = require('path')

function resolve(dir) {
    return path.join(__dirname, dir)
}
module.exports = defineConfig({
    chainWebpack(config) {
        // 设置 svg-sprite-loader
        // 将处理svg的loader添加exclude,表示不需要使用该loader处理icon。
        config.module
            .rule('svg')
            .exclude.add(resolve('src/icons'))
            .end()
        config.module
            .rule('icons') // 添加一个新的loader  匹配src/icons内的 svg文件  
            .test(/\.svg$/)
            .include.add(resolve('src/icons'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({ // 指定symbolId 不指定则默认为svg文件名 识别到icon-user 回去找 user.svg
                symbolId: 'icon-[name]'
            })
            .end()
    }

})