CODEWITHSUNDEEP
vue.jsionic-frameworkionic4
Apophis
Apophis

Reputation: 563

Ionic 4, Ionicon library adding a custom icon

I'm currently using Vue Cli to generate a project which includes ionic and ionicon libraries.

package.json

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

I'm trying to add a custom icon to my project. I'm following the Ionic documentation https://ionicons.com/usage which state that in order to add a custom SVG icon the following steps must be taken:

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.

I've followed the example and the icon is not being loaded. Another example for the same case scenario that I've found is the following https://golb.hplar.ch/2018/01/Custom-SVG-icons-in-Ionic.html. Following this example I've tried adding the SVG code for the icon directly in the src. This seems to work but for organization purposes, I would find it more convenient if I could pass the file path to the component.

Upvotes: 5

Views: 4988

Answers (2)

htmn
htmn

Reputation: 1675

This is what I did to get this to work in Vue

  1. In your vue-cli project, install latest @ionic/vue
    npm i @ionic/[email protected]
  2. Modify main.js

if you only want to use custom icons: 

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

if you also want to use ionicons (inside addIcons I'm basically doing this:
addIcons({"ios-star": star.ios, "md-star": star.md}). This is of course optional but this way I only need to add a new entry to my arrays if I want a new icon inside my app, you can read more about that 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')
  1. Copy my custom svg icon into the public folder
  2. Use the custom icon: <ion-icon src="/custom.svg" />

Edit: if you want to use src/assets instead of public folder
I also tried to move my custom icons to src/assets folder because of 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`)" />

Upvotes: 4

Sergey Rudenko
Sergey Rudenko

Reputation: 9227

Here is what I did and it worked. So maybe you need to check if you can generate proper SVGs.

  1. Generate proper SVG. I did one for free here:

    • www.morphistic.app
    • click "creator" button on the top
    • click choose any premade shape, ensure its in the snippet frame center
    • click share on the top right, there you can save the SVG

  2. Load this SVG into your project's 'assets' folder (as for any static asset)

  3. Now point your ion-icon to that svg:

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

I tested it just now with Ionic 4.11.2

Upvotes: 0

Related Questions