Ionic 4，Ionicon 库添加自定义图标

Question

我目前正在使用 Vue Cli 生成一个包含 ionic 和 ionicon 库的项目。

package.json

  "@ionic/core": "^4.11.7",
  "@ionic/pwa-elements": "^1.4.1",
  "@ionic/vue": "0.0.9",
  "ionicons": "^4.6.3",

我正在尝试将自定义图标添加到我的项目中。我正在关注 Ionic 文档 https://ionicons.com/usage，其中指出要添加自定义 SVG 图标，必须执行以下步骤：

To use a custom SVG, provide its URL in the src attribute to request the external SVG file. The src attribute works the same as in that the URL must be accessible from the webpage that's making a request for the image. Additionally, the external file can only be a valid SVG and does not allow scripts or events within the SVG element.

我已按照示例进行操作，但未加载图标。我发现的相同案例场景的另一个示例如下 https://golb.hplar.ch/2018/01/Custom-SVG-icons-in-Ionic.html。在这个例子之后，我尝试直接在 src 中为图标添加 SVG 代码。这似乎可行，但出于组织目的，如果我可以将文件路径传递给组件，我会发现它更方便。

Answer 1

这是我所做的并且有效。所以也许您需要检查是否可以生成正确的 SVG。

生成适当的 SVG。我在这里免费做了一个：
- www.morphistic.app
- 点击顶部的"creator"按钮
- 点击选择任何预制形状，确保其位于片段框架中心
- 点击右上角的分享，保存SVG
将此 SVG 加载到项目的 'assets' 文件夹中（对于任何静态资产）
现在将您的离子图标指向该 svg：

<ion-icon src="/assets/mysvg.svg"></ion-icon>

我刚才用 Ionic 4.11.2 测试了它

Answer 2

这就是我为了让它在 Vue 中工作所做的工作

在你的vue-cli项目中，安装最新的@ionic/vue
npm i @ionic/vue@0.0.9
修改main.js

如果您只想使用自定义图标：

import Vue from 'vue'
import App from './App.vue'
import Ionic from '@ionic/vue'
import '@ionic/core/css/ionic.bundle.css';

Vue.use(Ionic);
Vue.config.productionTip = false

new Vue({
  render: function (h) { return h(App) },
}).$mount('#app')

如果你也想使用 ionicons（在 addIcons 我是基本上是这样做的：
addIcons({"ios-star": star.ios, "md-star": star.md})。这当然是可选的，但这样我只需要如果我想在我的应用程序中添加一个新图标，则向我的数组添加一个新条目，你可以阅读更多关于 here 的内容）：

import Vue from 'vue'
import App from './App.vue'
import Ionic from '@ionic/vue'
import '@ionic/core/css/ionic.bundle.css'
import { addIcons } from 'ionicons'
import camelCase from 'lodash/fp/camelCase'

// ionicons.com App icons
const appIcons = ['star', 'images']
// ionicons.com Logos
const logos = ['logo-facebook']

Vue.use(Ionic);
Vue.config.productionTip = false

addIcons({
 // App icons object
 ...appIcons.reduce((acc, name) => {
   return {
     ...acc,
     [`ios-${name}`]: require('ionicons/icons')[camelCase(name)].ios,
     [`md-${name}`]: require('ionicons/icons')[camelCase(name)].md
   }
 }, {}),
 // Logos object
 ...logos.reduce((acc, name) => {
   return {
     ...acc,
     [name]: require('ionicons/icons')[camelCase(name)]
   }
 }, {}),
})

new Vue({
 render: function (h) { return h(App) },
}).$mount('#app')

将我的自定义 svg 图标复制到 public 文件夹中
使用自定义图标：<ion-icon src="/custom.svg" />

编辑：如果您想使用 src/assets 而不是 public 文件夹
我还尝试将我的自定义图标移动到 src/assets 文件夹因为 vue-cli public folder. I found that for some reason with vue-cli, webpack does not pick up custom icons when putting them into src/assets folder and using the icons as <ion-icon src="./assets/custom.svg" />. So if you want to keep your icons in the src/assets, this workaround worked for me (based on this):

<ion-icon :src="require(`@/assets/custom.svg`)" />

Ionic 4，Ionicon 库添加自定义图标

Ionic 4, Ionicon library adding a custom icon

ionic-framework

vue.js

ionic4