Element UI作为出色的开源组件库，必须使用许多人。在VUE3中，我们需要使用Element Plus.Element Plus具有很多好的组件。您可以直接检查官方文档：Element Plus。本文主要介绍如何使用VUE3+Element Plus项目中封装的SVG图标。
由于我们是VUE3项目，因此我们可以使用它来快速创建VU3项目：
创建项目后，我们将再次介绍它，安装和介绍过程如下：
这
这
引言后，我们可以在VUE3项目中使用它：
元素plus使用图标比element ui更麻烦。首先，我们需要安装图标的依赖项：
当然，我们在中间注册了所有图标，我们还可以按需介绍图标：
用法：
元素加的使用是，这与元素UI使用的类别名称非常不同，即我们无法直接在中间使用的图标。尽管元素加上图标已经可以满足大多数场景的需求，但一些特殊方案只能从或自定义图标获得。
因此，有没有办法将其封装到SVG中并称其为称呼？
可扩展的向量图形，称为SVG，是基于XML的矢量图形，可用于描述两个维度矢量图形。SVG可以优雅和简洁地渲染不同尺寸的图形，并且可以无限地降低并降低无折叠或降低质量或降低质量或质量。这个特征比平等要好。有很多SVG。如果您有兴趣，可以转到MDN查看文档：SVG.我们只是一个简单且实用的SVG，可以封装IconFont。
首先，我们创建一个新文件，
这样，它被称为封装在SVG中。在这里，我们关注一些属性：
使用包装相对简单，只需将其用作普通组件。例如：
如果您不想部分注册组件，也可以注册为全局组件：
作为SVG组件，我们也可以直接使用它，因此您可以在中间添加任何内容：
从理论上讲，本教程应该结束。在使用过程中，以正常方式设置的样式不会生效。我尝试了几种解决方案，最后放弃了，并使用了监视鼠标事件来解决它。
SVG与样式不同。当鼠标通过修改样式悬挂在图标上时，它无法设置颜色更改。目前，我们需要改变想法。我们在中间并在SVG上行动，因此我们可以在父组件的值中实现“悬停”效应。
上面的示例适用于单个。如果是多重的，则需要进一步转换：
相反，它并不复杂。
一些朋友可能会遵循上述步骤，发现图标的颜色无法修改。如果没有错，则应该是导入Iconfont的问题。从本质上讲，我们将直接在Iconfont的官方网站上下载图标：
减压后，下载的压缩软件包，仅将其复制到项目：
让我们看一下郑赫的源代码：
可以发现，两个图标之间的最大区别是一个，另一个图标不是问题的关键。如果某个图标的填充不是空的，则当SVG时无法修改填充颜色参考。
例如：
操作结果：
我应该如何解决这个问题？一种方法是手动删除所有图标的属性，另一种是在IconFont上使用批处理着色。
批处理着色后，我们再次下载图标，然后更换原始图标，然后转到源代码以查看所有图标都消失了，并且可以修改颜色。
本文详细介绍了如何在Element Plus中使用IconFont。简而言之，它是将其封装成SVG并支持颜色的动态修改。尽管并不难操作，但很容易踩踏一些坑。你学到了吗？
这并不容易，请指示重印的来源
原始：https：//juejin.cn/post/7111306056113848327