SVG icons usage alternative for Vuetify 3 and icon embedding

Allows the mixed usage of these icon packages and the embedding of icons:

• Font Awesome Icons free (solid and regular variants)
• Material Design Icons
• Material Design Icons Light
• heroicons (outline, solid and mini variants)
• Bootstrap Icons
• Others can be added by creating custom ExtractionOptions.

This package is composed of three main parts:

1. A Vue component for Vuetify based on the one from the mdi IconPack exported by 'vuetify/iconsets/mdi-svg', that gets the icon data from a string with the format: 'SVG;<path data>;<view box>;<fill>;<stroke width>;<fill rule>' if the string does not start with 'SVG;', it just uses the string as the path data like mdi-svg does.
2. Functions that output the the previously mentioned format. The combination of the component and this functions allows the mixed usage of icons from different packages in any Vuetify component that uses icons.
   1. useFA to use a IconDefinition object representing a Font Awesome icon.
   2. useHIO to use heroicons outline variant from @xrnoz/heroicons-js.
   3. useHIS to use heroicons solid variant from @xrnoz/heroicons-js.
   4. useHIM to use heroicons mini variant from @xrnoz/heroicons-js.
   5. useBI to use Bootstrap Icons from @xrnoz/bootstrap-icons-js.
3. A Vite plugin that replaces the calls of the provided functions with it's resulting string to optimize the usage of the icons. By default it also removes the first import of @xrnoz/vuetify-svg-icons and of the icon package(s), as after replacing the function calls the imports are no longer neccesary.

Table of contents

• Usage (Examples in TypeScript)
  • 1. Add the dependencies:
  • 2. Create a file icons.ts:
  • 3. Configure Vuetify
  • 4. Use the icons
  • 5. (Optional) Configure the plugin
  • 5.1. Applying the plugin to other icon packs:
    • icons.ts:
    • vite.config.ts:
• Plugin options
  • ExtractionOptions
• Resources

Usage (Examples in TypeScript)

1. Add the dependencies:

yarn add @xrnoz/vuetify-svg-icons

# yarn add @fortawesome/free-solid-svg-icons
# yarn add @fortawesome/free-regular-svg-icons
# yarn add @mdi/js
# yarn add @mdi/light-js
# yarn add @xrnoz/heroicons-js
# yarn add @xrnoz/bootstrap-icons-js

2. Create a file icons.ts:

import { aliases as defaultAliases  } from 'vuetify/iconsets/mdi-svg';

import { mdiThumbDown } from '@mdi/js';
import { mdilMagnify } from '@mdi/light-js';

import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';

import { his, hio, him } from '@xrnoz/heroicons-js';

import { bi } from '@xrnoz/bootstrap-icons-js';

// To use the vite plugin some of the functions are different, see section 5.
import { useFA, useHIO, useHIS, useHIM, useBI } from '@xrnoz/vuetify-svg-icons';

import type { IconAliases } from 'vuetify';

export const aliases: IconAliases = {
  ...defaultAliases, // Used by Vuetify components, can be customized.

  // mdi
  dislike: mdiThumbDown,

  // mdil
  search: mdilMagnify,

  // fas
  like: useFA(fas.faHeart),

  // far
  notifications: useFA(far.faBell),

  // heroicons outline
  launch: useHIO(hio.rocketLaunch),

  // heroicons solid
  settings: useHIS(his.adjustmentsHorizontal),

  // heroicons mini
  experimental: useHIM(him.beaker),

  // bootstrap icons
  inLove: useBI(bi.biArrowThroughHeart),
};

3. Configure Vuetify

import { createApp } from 'vue';
import { createVuetify } from 'vuetify';
import svg from '@xrnoz/vuetify-svg-icons'; // Component

import { aliases } from './icons'; // Aliases
import App from './App.vue';

import 'vuetify/styles';

const vue = createApp(App);
vue.use(
  createVuetify({
    icons: {
      defaultSet: 'svg',
      aliases,
      sets: { svg },
    },
  }),
);

vue.mount('#app');

4. Use the icons

<template>
  <v-row>
    <v-btn icon>
      <!-- `launch` alias defined in icons.ts -->
      <v-icon>$launch</v-icon>
    </v-btn>
  </v-row>

  <v-row>
    <!-- `like` alias defined in icons.ts -->
    <v-btn color="blue" append-icon="$like">Like</v-btn>
  </v-row>

  <v-row>
    <!-- `dislike` alias defined in icons.ts -->
    <v-btn color="red" append-icon="$dislike">Dislike</v-btn>
  </v-row>

  <v-row>
    <!-- usage on the fly -->
    <v-btn color="yellow" :append-icon="useFA(faFaceSurprise)">Wow!</v-btn>
  </v-row>
</template>

<script lang="ts" setup>
  import { faFaceSurprise } from '@fortawesome/free-solid-svg-icons';
  import { useFA } from '@xrnoz/vuetify-svg-icons';
</script>

5. (Optional) Configure the plugin

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vuetify from 'vite-plugin-vuetify';
import embedIcons from '@xrnoz/vuetify-svg-icons/plugin';

export default defineConfig({
  plugins: [
    vue({}),
    vuetify({}),

    // Embed Font Awesome solid icons by default (must use `useFAS` instead of `useFA`)
    embedIcons({ include: ['./src/icons.ts', './src/ZaWarudo.vue'], showReplacements: true }),
  ],
});

5.1. Applying the plugin to other icon packs:

icons.ts:

import { aliases as defaultAliases  } from 'vuetify/iconsets/mdi-svg';

import * as mdi from '@mdi/js';
import * as mdil from '@mdi/light-js';

import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';

import { his, hio, him } from '@xrnoz/heroicons-js';

import { bi } from '@xrnoz/bootstrap-icons-js';

import { useMDI, useMDIL, useFAS, useFAR, useHIO, useHIS, useHIM, useBI } from '@xrnoz/vuetify-svg-icons';

import type { IconAliases } from 'vuetify';

export const aliases: IconAliases = {
  ...defaultAliases,

  // mdi
  dislike: useMDI(mdi.mdiThumbDown),

  // mdil
  search: useMDIL(mdil.mdilMagnify) 

  // fas
  like: useFAS(fas.faHeart),

  // far
  notifications: useFAR(far.faBell),

  // heroicons outline
  launch: useHIO(hio.rocketLaunch),

  // heroicons solid
  setting: useHIS(his.adjustmentsHorizontal),

  // heroicons mini
  experimental: useHIM(him.beaker),

  // bootstrap icons
  inLove: useBI(bi.biArrowThroughHeart),
};

vite.config.ts:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vuetify from 'vite-plugin-vuetify';
import embedIcons from '@xrnoz/vuetify-svg-icons/plugin';

export default defineConfig({
  plugins: [
    vue({}),
    vuetify({}),

    // Use `embed` option to indicate the presets to use or add a custom one:
    embedIcons({ include: './src/icons.ts', embed: ['mdi', 'mdil', 'fas', 'far', 'hio', 'his', 'him', 'bi'] }),
  ],
});

Plugin options

Option | Required | Default | Description -----------------|----------|---------------------------------------|------------ include | yes | | Target files for the plugin. embed | no | ['fas'] | Icons package(s) for extraction and embedding. removeImports | no | true | Whether to remove from the target the first import of extractorPkg and of iconsPkg defined in the ExtractionOptions of the preset(s) used with the embed option. showReplacements | no | false | Whether to show replacement information. apply | no | | Whether to restrict the plugin to run only on build or serve. dumpFile | no | | File to dump the transform results for debugging purposes.

ExtractionOptions

The default embed option of the plugin is the 'fas' preset equal to this ExtractionOptions object:

export const fasPreset: ExtractionOptions = {
  iconsPkg: '@fortawesome/free-solid-svg-icons',
  iconsExport: 'fas',
  extractor: 'useFAS',
  extractorPkg: '@xrnoz/vuetify-svg-icons',
};

Resources

• Font Awesome Icons Search
• Material Design Icons
• Material Design Icons Light
• heroicons
• Bootstrap Icons
• Vuetify Icon Fonts Documentation