vue3中使用插件vite-plugin-svg-icons

在vue3 + vite 项目中使用svg图标
插件:vite-plugin-svg-icons

  • 预加载 在项目运行时就生成所有图标,只需操作一次 dom
  • 高性能 内置缓存,仅当文件被修改时才会重新生成

安装

bash 复制代码
yarn add vite-plugin-svg-icons -D
# or
npm i vite-plugin-svg-icons -D
# or
pnpm install vite-plugin-svg-icons -D

使用

  • vite.config.ts 中的配置插件
javascript 复制代码
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";

plugins: [
  createSvgIconsPlugin({
    // 指定缓存文件
    iconDirs: [resolve(process.cwd(), "src/assets/icons/svg")],
    // 指定symbolId格式
    symbolId: "icon-[dir]-[name]",
  }),
]

配置 main.ts

javascript 复制代码
import 'virtual:svg-icons-register'

封装SvgIcon组件 src/components/SvgIcon

javascript 复制代码
<template>
  <div v-if="isExter" :style="styleExternalIcon" v-bind="$attrs" class="svg-external-icon svg-icon" />
  <svg v-else :class="svgClass" aria-hidden="true" v-bind="$attrs">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script setup lang="ts">
import { isExternal } from '@/utils/validate'
defineOptions({
  name: 'SvgIcon',
})

const props = withDefaults(defineProps<{
  iconClass: string,
  className?: string
}>(), {
  className: ''
})

const isExter = computed(() => {
  return isExternal(props.className)
})
const iconName = computed(() => {
  return `#icon-${props.iconClass}`
})
const svgClass = computed(() => {
  if (props.className) {
    return 'svg-icon ' + props.className
  } else {
    return 'svg-icon'
  }
})
const styleExternalIcon = computed(() => {
  return {
    mask: `url(${props.iconClass}) no-repeat 50% 50%`,
    '-webkit-mask': `url(${props.iconClass}) no-repeat 50% 50%`
  }
})
</script>

<style scoped lang="scss">
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.svg-external-icon {
  background-color: currentColor;
  mask-size: cover!important;
  display: inline-block;
}
</style>

组件使用

javascript 复制代码
<svg-icon icon-class="404" />
相关推荐
牧羊狼的狼6 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手8 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲8 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell8 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮10 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel10 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip11 小时前
JavaScript事件流
前端·javascript
赵得C11 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG11 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_4569042711 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js