如何将 svg 从文件导入 Angular 5 中的组件？

Posted 2023-02-19

【中文标题】如何将 svg 从文件导入 Angular 5 中的组件？

【英文标题】：How do I import svg from file to a component in angular 5?

【发布时间】：2019-04-03 15:26:45

【问题描述】：

我发现所有将 svg 添加到 AngularCli 中的组件的教程都建议将其插入到 html 模板中，如下所示：

<div>
  <svg viewBox="0 0 250 250">
    <svg:g class="group">
       <svg:polygon class="shield" points="125,30 125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,230 203.9,186.3 218.1,63.2" />
       <svg:path class="a" d="M125,52.1L66.8,182.6h0h21.7h0l11.7-29.2h49.4l11.7,29.2h0h21.7h0L125,52.1L125,52.1L125,52.1L125,52.1
      L125,52.1z M142,135.4H108l17-40.9L142,135.4z"/>
    </svg:g>
  </svg>
</div>

但我希望保持模板清晰，并且只在其中插入几个标签，其中包含分隔 svg 文件的 url，somwehow 像这样：

<svg class="star">
        <use xlink:href="../../../assets/images/svg/star.svg"
               x="0"
               y="0" />
</svg>

如何在组件中使用单独的 svg 文件？

【参考方案1】：

如果你有logo.svg:

将其放入您的 src/assets 文件夹中 在angular.json 配置中包含文件夹："assets": [ "src/assets" ] 从模板中引用它：<img src="assets/svg/logo.svg">

【参考方案2】：

将您的 SVG 文件包含在 src/assets 文件夹中，并将 svg 文件夹添加到您的 angular.json 文件中。

"assets": [ "src/assets/svg/*" ]

这样您可以根据需要将文件包含在组件中。

【讨论】：

谢谢！一个宁愿添加 svg 文件夹 "assets": [ "src/assets/svg/*" ] 而不是每个 svg 文件。

【参考方案3】：

一种方法是为您的 svg 文件设置 id 属性并将您的 svg 文件放在您的资产文件夹中。然后像这样在 mat-icon 中使用该 id：

<mat-icon svgIcon="my-star-icon"></mat-icon>

这是一个更好的方法；这样您就不必在 UI html 代码中处理 svg 标签。这也支持谷歌图标。

虽然如果您使用有角度的材料，这会起作用。

编辑： 您需要在组件中使用 IconRegistry 注册图标才能使其正常工作：

  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) 
    iconRegistry.addSvgIcon(
        'my-star-icon',
        sanitizer.bypassSecurityTrustResourceUrl('assets/icons/my-star-icon.svg'));
  

查看文档here 和示例here。

【讨论】：

这需要使用 Angular Material 进行额外设置。你能用这些更新你的答案吗？如果没有，我可以继续编辑您的答案。

@OjasDeshpande 您可以编辑我的答案。我没有使用较新的版本。感谢您指出。

【参考方案4】：

所以我试图这样做，对于我的生活，我无法让这个 svg 出现，直到......经过多次互联网搜索，我不认为只有我，如果你复制意大利面来自互联网的路径，那么也许你忘了包括这个 xmlns="http://www.w3.org/2000/svg"

<svg xmlns="http://www.w3.org/2000/svg"  >
<path d="I love copying and pasting paths"/>
</svg>

那你可以继续做你的

 <img src="assets/img/logo.svg" />

如果这不起作用，并且您想以某种方式使用图像，则将图像放入assets/img/copypasta.png

【参考方案5】：

1enter code here`Here I Tryed a way Like These To Change 首先创建了一个 .ts 文件作为图标包并将其导出。

`export const ICON_PACK_6 =

'VNF-pkg': '<svg fill="#222b45b8" id="Layer_5" enable-background="new 0 0 64 64"  viewBox="0 0 64 64"  xmlns="http://www.w3.org/2000/svg"><g><path d="m42.929 49h14.142v2h-14.142z" transform="matrix(.142 -.99 .99 .142 -6.577 92.415)"/><path d="m52.293 47.707 2.293 2.293-2.293 2.293 1.414 1.414 3.707-3.707-3.707-3.707z"/><path d="m46.293 46.293-3.707 3.707 3.707 3.707 1.414-1.414-2.293-2.293 2.293-2.293z"/><path d="m60.884/><path d="m41 17h14v2h-14z"/></g></svg>',

;`

然后在构造函数中调用应用程序组件中的函数，如下所示

this.iconLibraries.registerSvgPack('pack-6', ICON_PACK_6);

当来到星云菜单添加

title: "VNF Onboarding",link: "/package-management/view", icon: icon: 'VNF-pkg', pack: 'pack-6' , ,]

Output