vue3 + vite + antdv 项目中自定义图标

前言:

iconfont-阿里巴巴矢量图标库 下载自己需要的icon图标,下载格式为svg;项目中在存放静态资源的文件夹下 assets 创建一个存放svg格式的图片的文件夹。

步骤:

1、安装vite-plugin-svg-icons

javascript 复制代码
npm i vite-plugin-svg-icons -D

2、创建svgIcon.vue组件

javascript 复制代码
<template>
  <svg aria-hidden="true" :class="svgClass">
    <use :xlink:href="symbolId" :fill="props.color" />
  </svg>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "svg-icon",
});
</script>
<script setup>
import { computed } from "vue";
const props = defineProps({
  prefix: {
    type: String,
    default: "icon",
  },
  name: {
    type: String,
    require: true,
  },
  color: {
    type: String,
    default: "#333",
  },
  className: {
    type: String,
    default: "",
  },
});
const symbolId = computed(() => `#${props.prefix}-${props.name}`);
console.log(symbolId.value, "symbolIdsymbolId");
const svgClass = computed(() => {
  if (props.className) {
    return `svg-icon ${props.className}`;
  }
  return "svg-icon";
});
</script>

<style>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.1em;
  /* 因icon大小被设置为和字体大小一致,而span等标签的下边缘会和字体的基线对齐,故需设置一个往下的偏移比例,来纠正视觉上的未对齐效果 */
  fill: currentColor;
  /* 定义元素的颜色,currentColor是一个变量,这个变量的值就表示当前元素的color值,如果当前元素未设置color值,则从父元素继承 */
  overflow: hidden;
}
</style>

3、在main.js文件中全局注册

4、在vite.config.js文件中进行配置

5、在其他组件中使用

效果:

相关推荐
brzhang25 分钟前
代码即图表:dbdiagram.io让数据库建模变得简单高效
前端·后端·架构
SummerGao.37 分钟前
【解决】layui layer的提示框,弹出框一闪而过的问题
前端·layui
天天扭码1 小时前
从数组到对象:JavaScript 遍历语法全解析(ES5 到 ES6 + 超详细指南)
前端·javascript·面试
拉不动的猪1 小时前
前端开发中常见的数据结构优化问题
前端·javascript·面试
街尾杂货店&1 小时前
css word
前端·css
Мартин.1 小时前
[Meachines] [Hard] CrimeStoppers LFI+ZIP-Shell+Firefox-Dec+DLINK+rootme-0.5
前端·firefox
冰镇生鲜1 小时前
快速静态界面 MDC规则约束 示范
前端
技术与健康1 小时前
【解读】Chrome 浏览器实验性功能全景
前端·chrome
Bald Monkey2 小时前
【Element Plus】解决移动设备使用 el-menu 和 el-sub-menu 时,子菜单需要点击两次才会隐藏的问题
前端·elementui·vue·element plus
小小小小宇2 小时前
PC和WebView白屏检测
前端