在antd项目中使用iconfont、自定义图标

最新推荐文章于 2024-05-10 18:43:40 发布

weixin_33819479

最新推荐文章于 2024-05-10 18:43:40 发布

阅读量4k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/leung-/p/9962378.html

版权

本文介绍了如何在antd项目中使用iconfont，包括如何导入自定义SVG图标。通过官方示例和代码演示，展示了从下载SVG内容到在组件中去除不必要的属性并实现图标展示的全过程。

摘要由CSDN通过智能技术生成

- ## 在antd项目中使用iconfont
使用antd Icon（https://ant.design/components/icon-cn/#components-icon-demo-custom）的自定义图标写法

官方效果：https://codesandbox.io/s/jjmk7w7nqv

复制下载下来的iconfont的svg标签内容至自定义组件

去掉svg标签的style、xmlns属性

下载下来的iconfont内容：

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg t="1542250283058" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1665" xmlns:xlink="http://www