我已经从ionicon下载了一些。svg文件，但是我不能使用类名来使用它们。

<my-icon>heart</my-icon>

<my-icon class="heart"></my-icon>

---

顺晟科技：

有两种实现图标的方法。

1. 首先导入css&为图标使用正确的类名，以后可以根据需要设置颜色。

2. 导入css并为您的自定义类名编写自定义css

ps。堆栈溢出代码段无法工作，请单击下面的codepen链接查看更改

codepenhere

类名的Ionicons引用:https://ionic.io/ionicons/v2

或者，如果您仍想使用自定义下载的图标，可以尝试在psuedo元素中设置该图标，并可以使用filter属性更改其颜色。

1.您可能需要将.svg转换为.ttf或.woff格式，以便使用类似类名的格式。我发现这个网站可以接受svg文件，并提供.ttf或.woff文件作为输出。

注意:可以通过这种方法轻松地调整svg的样式。

https://glyphter.com/

<my-icon>heart</my-icon>

<my-icon class="heart"></my-icon>

2.您可以创建一个类，将该svg作为

的背景

<my-icon>heart</my-icon>

<my-icon class="heart"></my-icon>

您可以为后台类编写自己的属性

首先，您希望在html中放置非常规标记，例如: 这是可以运行的，但在某些计算机中将无法工作。我将显示:

但是正因为如此，您可以使用类来检测图标。

然后可以使用一些选项，例如:

• background-image：url（“your-url-icon.svg”）；
• svg标记：图标代码
• 并且可以使用框架，如font-awesome！