时间戳

首页 > 解决方案 > ionic 4 如何动态添加 svg 图标 - {title: 'About', url: '/about' , icon:'person'}

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

问题描述

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

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

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

&[class*="custom-mobile"] { mask-image: url(../assets/mobile.svg); } } ---也试过了，不能在离子 4 中工作---

标签： ionic-frameworkionic4

解决方案

您在哪里使用它不是很清楚，但 IonIcons 有关于自定义图标的文档：

要使用自定义 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>

推荐阅读