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、在其他组件中使用

效果:

相关推荐
Python私教18 分钟前
安装electron项目是为什么要执行postinstall script
前端·javascript·electron
shmily_yyA27 分钟前
Nextjs15 实战 - React Notes之SidebarNoteList优化和Suspense的使用
前端·react.js·前端框架
知识分享小能手27 分钟前
CSS3学习教程,从入门到精通, 化妆品网站 HTML5 + CSS3 完整项目(26)
前端·javascript·css·学习·css3·html5·媒体
了不起的码农1 小时前
ES6对函数参数的新设计
前端·ecmascript·es6
XH2761 小时前
Android 通知用法详解
前端
陈随易1 小时前
盘点23个Nodejs的替代品Bun的实用功能
前端·后端·程序员
uhakadotcom1 小时前
兄弟们,炸裂了!llama 4发布了!又有哪些创业公司被颠覆了?
前端·算法·面试
uhakadotcom1 小时前
EventEmitter3:高性能事件发射器的使用与优势
前端·javascript·面试
XH2761 小时前
Android Bitmap.createBitmap() 用法全解析
前端·设计
XH2761 小时前
Android ContentResolver地点增删改查详解
前端·后端