Angular 4+:如何使用 svg 文件中的图标

Posted

技术标签:

【中文标题】Angular 4+:如何使用 svg 文件中的图标【英文标题】:Angular 4+ : How to use icons from svg file 【发布时间】:2019-05-03 09:08:29 【问题描述】:

我有一个包含图标集合的 icon.svg 文件。我想在我的应用中使用它们,因为我们会显示材质图标。

知道如何将文件包含在应用程序中并使用它们吗?

我已经尝试过解决方案:

Custom font import in Angular4

SVG icons from external file

how to generate webfont from SVG icons in angular

但我无法显示图标。

这是我想要使用图标的方式: <span class="icon-home"></span> 然后它应该显示主页图标。我也准备好使用css,如一些教程 .icon-home:before content: "\e900";

有人可以让我了解它是如何工作的吗?

【问题讨论】:

你应该使用glyphter 或类似的来创建字体,下载并加载到你的项目中。您可以拖放、调整大小和重新定位每个<svg> 并设置图标的类别。 @AndreiGheorghiu 我也有用于图标的 .ttf 和 .woff 文件。你能解释一下我如何在我的应用中包含和使用。 您下载并将它们放置在您的应用中。您只需要在您的应用程序中包含提供的css。保持 CSS 文件和提供的字体文件之间的相对结构非常重要。如果 CSS 字体文件是从 fonts/someFontFileName 加载的,但您移动了 CSS 并从另一个位置执行它,它将不再找到字体文件 => 您要么也移动它们,要么相应地更改 URL。如果没有看到您的代码,我无法提供更多帮助。 【参考方案1】:

你可以把svgs的sprite文件放在assets文件夹中,在你的模板组件中使用

【讨论】:

以上是关于Angular 4+:如何使用 svg 文件中的图标的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Angular 中更改 svg 元素的颜色?

如何使用 Angular 6 中的自定义指令来呈现动态生成的内联 SVG

将 svg 拟合到 angular.js 中的背景图像 div

Renderer2 在使用 d3 js - Angular 4 时不渲染 SVG 元素

获取 Angular 资产文件夹中所有 svg 文件的列表

如何在 Bootstrap 4 中使用 Font Awesome 中的 svg 图标?