Vue3通用的 svg 组件封装 - svgIcon组件

正常的 svg 代码过于臃肿，显然不适合在项目中直接使用

javascript 复制代码

<svg t="1757213481239" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21248" ><path d="M512 1024C229.2224 1024 0 794.7776 0 512S229.2224 0 512 0s512 229.2224 512 512-229.2224 512-512 512z m259.1488-568.8832H480.4096a25.2928 25.2928 0 0 0-25.2928 25.2928l-0.0256 63.2064c0 13.952 11.3152 25.2928 25.2672 25.2928h177.024c13.9776 0 25.2928 11.3152 25.2928 25.2672v12.6464a75.8528 75.8528 0 0 1-75.8528 75.8528H366.592a25.2928 25.2928 0 0 1-25.2672-25.2928v-240.1792a75.8528 75.8528 0 0 1 75.8272-75.8528h353.9456a25.2928 25.2928 0 0 0 25.2672-25.2928l0.0768-63.2064a25.2928 25.2928 0 0 0-25.2672-25.2928H417.152a189.6192 189.6192 0 0 0-189.6192 189.6448v353.9456c0 13.9776 11.3152 25.2928 25.2928 25.2928h372.9408a170.6496 170.6496 0 0 0 170.6496-170.6496v-145.408a25.2928 25.2928 0 0 0-25.2928-25.2672z" fill="#C71D23" p-id="21249"></path></svg>

如果我们封装一个组件，使用 svg 图片可以像使用图片一样那就方便多了

js 复制代码

<svg-icon icon-name="newBlogger" size="22"></svg-icon>

第一步：动态获取所有 svg 文件

创建一个 js 文件，获取 svg 文件夹下的所有 .svg 文件，最后返回一个带有全部 .svg 文件的一个对象

javascript 复制代码

@/utils/svgIcons.js

// 动态导入svg目录下所有的.svg文件
const icon = import.meta.glob('/src/assets/icon/svg/*.svg',{eager:true})
// 最后导出
export default {
    icon
}

单独创建一个 js 文件进行获取的目的是为了实现，一次加载多次使用的效果

第二步：注册通用 svg 组件

js 复制代码

@/assets/components/svgIcon.vue

<script setup>
// 注册组件
defineComponent({name: 'svgIcon'})

// 定义组件两个参数
// iconName：图标名，即目录下保存的文件名
// size：图标的大小
const props = defineProps({
  iconName: {type: String, required: true},
  size: {type: [String, Number], default: 24}
})

// 遍历对象，匹配对应的地址，得到实际的 svg 图标地址
const iconSvg = ref(Object.keys(Icons.icon).filter(iconName => iconName.indexOf(props.iconName) > -1))

// 监听组件参数，参数变化时及时响应
// 主要监听 iconName 的变化，用于图标颜色的更换
watch(props, () => {
  iconSvg.value = Object.keys(Icons.icon).filter(iconName => iconName.indexOf(props.iconName) > -1)
})
</script>

<template>
  <div>
    < svg :width="size" :height="size" aria-hidden="true">
      <use :xlink:href="iconSvg"></use>
    </ svg>
  </div>

</template>

注意事项

1.一开始没有使用 watch() 监听函数，导致更新 iconName 时图标并未更换；当使用了watch 函数进行监听，当 iconName 属性发生变化，重新赋值

2.阿里的iconfont中下载的svg文件，默认自带宽高，需要在文件中进行删除，才可重新调大小