hero-icon-resolver

Automatically resolves Hero Icon components in Vue apps.

Installation

npm i -D hero-icon-resolver

And if you haven't already

npm i @heroicons/vue

Usage

Used in combination with unplugin-vue-components.

// vite.config.js
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import Components from "unplugin-vue-components/vite";
import { heroIconResolver } from "hero-icon-resolver";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        heroIconResolver,
      ],
    }),
  ],
});

Then, from within any Vue component, reference the Hero icons without importing them.

<!-- SomeComponent.vue -->
<template>
  <HeroSolidArrowUp />
</template>

In this example, "Arrow Up" is the name of the icon, "Solid" is the type, and "Hero" is a required prefix to prevent component resolution conflicts.

The available types are

• solid
• outline
• mini (used in combination with solid or outline)

All of the following formats are available for all icons.