我目前正在使用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图标，必须采取以下步骤：
要使用自定义SVG，请在src属性中提供其URL，以请求外部SVG文件。src属性的作用与必须从正在请求图像的网页上访问URL的方式相同。此外，外部文件只能是有效的SVG，并且不允许SVG元素内的脚本或事件。
我已按照示例进行操作，并且未加载图标。我发现的相同案例场景的另一个示例是以下https://golb.hplar.ch/2018/01/Custom-SVG-icons-in-Ionic.html。在此示例之后，我尝试将图标的SVG代码直接添加到src中。这似乎可行，但是出于组织目的，如果可以将文件路径传递给组件，我会发现它更方便。
这就是我要做的，以便使其在Vue中工作
npm i @ionic/[email protected]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')
public文件夹中<ion-icon src="/custom.svg" />编辑：如果要使用src/assets而不是public文件 夹，由于vue-cli public folder ，
我还尝试将自定义图标移动到src/assets文件夹。我发现由于某种原因，使用vue-cli时，webpack不会在将自定义图标放入src/assets文件夹并将图标用作时拾取自定义图标<ion-icon src="./assets/custom.svg" />。所以，如果你想保持你的图标中src/assets，这种解决方法为我工作（基于此）：
<ion-icon :src="require(`@/assets/custom.svg`)" />
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句