Ionic 3 自定义图标答案

【问题标题】：Ionic 3 custom iconsIonic 3 自定义图标
【发布时间】：2018-12-10 11:26:16
【问题描述】：

我可以在/assets/myIcon.svg 目录中添加 svg 图标，然后将这些图标称为 imgs：

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

另外，我正在尝试使用 flaticon 中的图标。我应该在哪里保存许可证（pdf 文件）？

【问题讨论】：

标签： ionic-framework ionic3

【解决方案1】：

如果您需要在您的应用程序中使用自定义图标，这里有一个非常适合我的解决方案。

将您的 .svg 图标文件放入：

/src/assets/icons/...
在您的 app.scss 文件中，添加以下 scss 代码：

ion-icon {
    &[class*="prefix-"] {
        mask-size: contain;
        mask-position: 50% 50%;
        mask-repeat: no-repeat;
        background: currentColor;
        width: 1em;
        height: 1em;
    }
    // custom icons
    &[class*="prefix-categories"] {
        mask-image: url(../assets/icon/ic_categories.svg);
    }
    &[class*="prefix-menu"] {
        mask-image: url(../assets/icon/ic_menu.svg);
    }
}

在您的 .html 文件中调用它：

&lt;ion-icon name="prefix-menu"&gt;&lt;/ion-icon&gt;

要为自定义图标应用更多样式，您可以编写如下内容：

ion-icon.ion-ios-prefix-categories {
    padding: 2px;
    font-size: 14px;
}

希望这会有所帮助。无论如何，关于许可，我不知道。

【讨论】：