0

I am using Nuxt 3, How can I import custom iconfont in Vuetify 3?

Previously, in Vuetify 2 I can import custom iconfont as such:

// vuetify.options.js

import '/assets/icons/custom_local_icon.css'

export default function () {
  return {
    ...
    icons: {
      iconfont: 'icomoon',
    },
    ...
  }

To be specific I generated my iconfont using IcoMoon

// assets/icons/custom_local_icon.css

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?cdy5ya');
  src:  url('fonts/icomoon.eot?cdy5ya#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?cdy5ya') format('truetype'),
    url('fonts/icomoon.woff?cdy5ya') format('woff'),
    url('fonts/icomoon.svg?cdy5ya#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.custom-icon_icon1:before {
  content: "\e901";
}

According to Vuetify 3 documentation this is how I should setup my vuetify.ts and currently I am stucked as in how I can incorporate my custom iconfont so that I could use it like this? <v-icon icon="custom-icon_icon1" />

// plugins/vuetify.ts

import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";

import { aliases, mdi } from "vuetify/iconsets/mdi";
import "@mdi/font/css/materialdesignicons.css";

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    components,
    directives,
    icons: {
      defaultSet: "mdi",
      aliases,
      sets: {
        mdi,
      },
    },
  });

  nuxtApp.vueApp.use(vuetify);
});

Your help and feedback is very much appreciated!

Ktsnix
  • 1
  • 1
  • I actually recommend that one: https://stackoverflow.com/a/72055404/8816585 – kissu Feb 23 '23 at 16:19
  • That sounds like a great solution! I was actually hoping that we could just incorporate our custom iconfont like how we did it back in Vuetify 2. But anyway, thanks for the suggestion! I'm giving it a try right away! – Ktsnix Feb 24 '23 at 04:46

0 Answers0