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

Question

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

包.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 图标，必须采取以下步骤：

要使用自定义 SVG，请在 src 属性中提供其 URL 以请求外部 SVG 文件。src 属性的工作原理与 URL 必须可从发出图像请求的网页访问相同。此外，外部文件只能是有效的 SVG，并且不允许在 SVG 元素中包含脚本或事件。

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

Answer 1

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

1. 在您的 vue-cli 项目中，安装最新的 @ionic/vue
   npm i @ionic/vue@0.0.9
2. 调整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')

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

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')

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

编辑：如果您想使用src/assets而不是public文件夹
，我还尝试将我的自定义图标移动到src/assets文件夹，因为vue-cli public folder。我发现由于 vue-cli 的某种原因，webpack 在将自定义图标放入src/assets文件夹并将图标用作<ion-icon src="./assets/custom.svg" />. 因此，如果您想将图标保留在 中src/assets，则此解决方法对我有用（基于此）：

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