使用svg引用iconfont

iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具https://www.iconfont.cn/

1. 新建项目

2. 在项目中生成在线代码

3. 选择Symbol，生成的js文件下载下来

4. 将上面的iconfont的js文件放在assets目录下

5. 在main.ts中引入

import "@/assets/iconfont/iconfont";

 6. 封装SvgIcon组件

 

<template>
  <svg v-bind="svgProperty">
    <use :xlink:href="iconClassName" v-bind="svgStyle" />
  </svg>
</template>
<script setup lang="ts">
import { computed } from "vue";
interface Props {
  iconClass: string;
  className?: string;
  size: string | number;
  color: string;
}
const props = withDefaults(defineProps<Props>(), {
  size: "24",
  color: "black",
});
const svgIcon = "svg-icon";
const iconClassName = computed(() => {
  return `#${props.iconClass}`;
});
const svgProperty = computed(() => {
  return {
    class: `${svgIcon} ${props.className}`,
    width: `${props.size}px`,
    height: `${props.size}px`,
  };
});
type Style = {
  size: string;
  fill: string;
};
const svgStyle = computed(() => {
  const obj: Style = {
    size: "",
    fill: "",
  };
  if (props.size) {
    obj.size = `${props.size}px`;
  }
  if (props.color) {
    obj.fill = props.color;
  }
  return obj;
});
</script>

7. 将组件注册为全局组件

 8. 使用SvgIcon组件

   <SvgIcon
        class-name="ml-3 cursor-pointer"
        color="red"
        icon-class="icon-shezhi"
        size="20"
      ></SvgIcon>