❤
npm
Sign UpSign In

@xrnoz/vuetify-svg-icons
TypeScript icon, indicating that this package has built-in type declarations

2.1.0 • Public • Published

SVG icons usage alternative for Vuetify 3 and icon embedding

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

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:

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

Readme

Keywords

Package Sidebar

Install

npm i @xrnoz/vuetify-svg-icons

Repository

github.com/xrnoz/vuetify-svg-icons

Homepage

github.com/xrnoz/vuetify-svg-icons#readme

Weekly Downloads

5

Version

2.1.0

License

MIT

Unpacked Size

25.8 kB

Total Files

13

Last publish

Collaborators

  • xrnoz
Try on RunKit
Report malware