antd 使用iconfont中的svg图标

努力进阶的快快~

已于 2023-07-06 09:17:47 修改

阅读量484

点赞数

分类专栏： antd vue3 svg 文章标签： javascript 前端

于 2023-05-24 14:38:59 首次发布

本文链接：https://blog.csdn.net/m0_69439101/article/details/130846602

版权

vue3 同时被 3 个专栏收录

20 篇文章 1 订阅

订阅专栏

antd

12 篇文章 0 订阅

订阅专栏

svg

1 篇文章 0 订阅

订阅专栏

1.单独建一个js文件存放图标

export const codeIcon = () => (
  <svg
    t="1684907003305"
    class="icon"
    viewBox="0 0 1024 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    p-id="977"
    width="1rem"
    height="1rem"
  >
    <path
      d="M512 64c0 0-44.416 111.936-328.448 111.936l0 458.88C183.552 816.192 512 960 512 960s328.448-143.808 328.448-325.184l0-458.88C555.392 175.936 512 64 512 64zM510.656 494.656 224.768 494.656 224.768 217.984c223.936 0 277.504-79.488 285.952-95.168L510.72 494.656zM799.232 619.456c0 158.528-286.784 284.224-287.232 284.416L512 494.656l287.232 0L799.232 619.456z"
      fill="currentColor"
      p-id="978"
    ></path>
  </svg>
);

2.引入使用

<template>
  <codeIcon class="code" />
</template>

<script>
import { codeIcon } from './codeIcon';
</script>

<style>
  .code {
  	color: var(--ant-primary-color);
	}
</style>