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