ionic 4 如何动态添加 svg 图标 - title: 'About', url: '/about' , icon:'person'

Posted 2023-03-13

【中文标题】ionic 4 如何动态添加 svg 图标 - title: \'About\', url: \'/about\' , icon:\'person\'

【英文标题】：ionic 4 how to add svg icon dynamically like- title: 'About', url: '/about' , icon:'person'ionic 4 如何动态添加 svg 图标 - title: 'About', url: '/about' , icon:'person'

【发布时间】：2020-01-08 13:04:21

【问题描述】：

title: 'About', url: '/about' , icon:'person' 这样如何添加自定义 svg 图标

title: 'mobile', url: '/about' , icon:'custom-mobile'

ion-icon &[class*="custom-"] 掩码大小：包含；掩码位置：50% 50%；掩码重复：不重复；背景：当前颜色；宽度：1em；高度：1em；

&[class*="custom-mobile"] mask-image: url(../assets/mobile.svg); ---也试过了，在 ionic 4 中不起作用---

【参考方案1】：

不清楚你在哪里使用它，但 IonIcons 有 documentation about custom icons:

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

所以 sn-p 看起来像这样：

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

如果你想动态地这样做：

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