离子 4 如何动态添加 SVG 图标 喜欢- {标题： '关于'， 网址： '/about' ， 图标：'人'}

Question

{title： 'About'， url： '/about' ， icon：'person'} 像这样 如何添加自定义 SVG 图标

{标题： '移动'，网址： '/关于' ， 图标："自定义移动'}

离子图标 { &[class*="custom-"] { mask-size： contain; mask-position： 50% 50%; mask-repeat： no-repeat; background： currentColor; width： 1em; height： 1em; }

&[class*="custom-mobile"] { mask-image： url(../资产/移动.svg(;} } ---也试过这个，在离子 4 中不起作用---

Answer 1

目前还不清楚你在哪里谈论使用它，但 IonIcon 有关于自定义图标的文档：

要使用自定义 SVG，请在src属性中提供其 URL 以请求外部 SVG 文件。src属性的工作方式与<img src="...">相同，因为必须可从请求图像的网页访问 URL。此外，外部文件只能是有效的svg，不允许svg元素中的脚本或事件。

所以片段看起来像这样：

<ion-icon src="/path/to/external/file.svg"></ion-icon>

如果你想动态地做到这一点，它是这样的：

<ion-icon [src]="variablewithimagepath"></ion-icon>