vuetify-nuxt-module icon indicating copy to clipboard operation
vuetify-nuxt-module copied to clipboard

Can`t add Custom Icons into Vuetify config icons.sets

Open Talla2XLC opened this issue 2 years ago • 4 comments

sets: {
  mdi,
  custom
}

sets not iterable durung app building

Can you please provide an example of including custom icons in playground? Thanks in advance

Talla2XLC avatar Jul 28 '23 10:07 Talla2XLC

sets is single string or array of icon sets:

sets?: IconFontName | IconFontName[] | FontIconSet[];

https://vuetify-nuxt-module.netlify.app/guide/icons/

userquin avatar Jul 28 '23 10:07 userquin

sets is single string or array of icon sets:

sets?: IconFontName | IconFontName[] | FontIconSet[];

https://vuetify-nuxt-module.netlify.app/guide/icons/

Typescript show warnings if insert custom icons. That's why I'm asking an example... just to understand if I do something wrong

Talla2XLC avatar Jul 28 '23 10:07 Talla2XLC

If you're adding custom icons you need to add them using a Nuxt plugin, check https://vuetify-nuxt-module.netlify.app/guide/#nuxt-plugin-hooks (broken link to icons) and https://vuetify-nuxt-module.netlify.app/guide/icons/unocss-preset-icons.html#adding-a-new-vuetify-icon-set (the example is using UnoCSS Preset Icons but you can add your custom icons there)

userquin avatar Jul 28 '23 10:07 userquin

Using hooks worked to me:

// ./plugins/vuetify-nuxt-module.js
import { defineNuxtPlugin } from '#imports'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('vuetify:configuration', ({ vuetifyOptions }) => {
    vuetifyOptions.icons.aliases.telegram = "svg:M9.78 18.65l.28-4.23l7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3L3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z"
  })
})

and then

<v-icon icon="$telegram"/>

I've icons configured as per docs: https://nuxt.vuetifyjs.com/guide/icons/svg-icons.html#material-design-icons

mbaev avatar Jan 26 '25 09:01 mbaev