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.

| format | Solid | Outline | Mini Solid | Mini Outline | | ------ | ------------------- | --------------------- | ------------------------ | -------------------------- | | 1 | HeroArrowUpSolid | HeroArrowUpOutline | HeroArrowUpSolidMini | HeroArrowUpOutlineMini | | 2 | HeroSolidArrowUp | HeroOutlineArrowUp | HeroSolidMiniArrowUp | HeroOutlineMiniArrowUp | | 3 | | | HeroArrowUpMiniSolid | HeroArrowUpMiniOutline | | 4 | | | HeroMiniSolidArrowUp | HeroMiniOutlineArrowUp | | 5 | hero-arrow-up-solid | hero-arrow-up-outline | hero-arrow-up-solid-mini | hero-arrow-up-outline-mini | | 6 | hero-solid-arrow-up | hero-outline-arrow-up | hero-solid-mini-arrow-up | hero-outline-mini-arrow-up | | 7 | | | hero-arrow-up-mini-solid | hero-arrow-up-mini-outline | | 8 | | | hero-mini-solid-arrow-up | hero-mini-outline-arrow-up |