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

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

这就是我为使其在 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')

如果您还想使用 ionic (内 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 .我发现由于 vue-cli 的某些原因，webpack 在将自定义图标放入 src/assets 时不会拾取它们。文件夹并使用图标作为 <ion-icon src="./assets/custom.svg" /> .因此，如果您想将图标保留在 src/assets 中，此解决方法对我有用(基于 this):

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