@woptima/vuetify-lordicons

Lordicon integration for Vuetify 3. Renders Lordicon Lottie icons when using the li- prefix. No script tags; uses lord-icon-element and lottie-web via npm. SSR-safe and tree-shakeable.

Installation

npm install @woptima/vuetify-lordicons lord-icon-element lottie-web

Peer dependencies

• vue ^3
• vuetify ^3
• lord-icon-element – defines the <lord-icon> custom element
• lottie-web – used by lord-icon-element to load animations

lord-icon-element and lottie-web are not bundled by this package; your app must install them so the custom element is defined at runtime.

Usage

1. Create the Lordicon set and register it as a Vuetify icon set:

import { createVuetify } from 'vuetify'
import { createVuetifyLordicons } from '@woptima/vuetify-lordicons'

const lordicons = createVuetifyLordicons({
  basePath: '/lordicons',
  defaultTrigger: 'hover',
})

export default createVuetify({
  icons: {
    defaultSet: 'lord',
    sets: {
      lord: lordicons,
    },
  },
})

2. Use li- prefixed icon names in templates:

<v-icon icon="li-home" />
<v-icon icon="li-user" :size="40" />
<v-icon icon="li-settings" trigger="loop" color="primary" />

Icons are loaded from ${basePath}/${iconName}.json (e.g. /lordicons/home.json for li-home). Only icons starting with li- use Lordicon; others are not handled by this set (use another set or aliases as needed).

Options

| Option | Default | Description | |------------------|--------------|-------------| | basePath | '/lordicons' | Base path or full URL for JSON files (no trailing slash). Use a path for local/public, or a CDN URL. | | getIconSrc | – | Optional. Function (iconName) => url to resolve each icon URL (e.g. from a CDN). When set, basePath is ignored. | | defaultTrigger | 'hover' | Default animation trigger: hover, click, loop, loop-on-hover, boomerang, morph, sequence, in. |

Where to serve JSON files

JSON files are never bundled. They are loaded at runtime from a path or URL you configure.

Local (public folder)

Place Lordicon JSON files in your public (or static) folder and set basePath to the path they are served under:

• Example: public/lordicons/home.json, public/lordicons/user.json.
• basePath: '/lordicons' → icons load from /lordicons/home.json, etc.

CDN or external URL

Use a full base URL so icons load from your CDN or any host:

createVuetifyLordicons({
  basePath: 'https://your-cdn.com/lordicons',
  defaultTrigger: 'hover',
})

Then li-home loads from https://your-cdn.com/lordicons/home.json. Works with AWS S3, CloudFront, or any CDN.

Custom URL per icon (getIconSrc)

For full control (e.g. different CDN per icon, or custom naming), use getIconSrc:

createVuetifyLordicons({
  getIconSrc: (name) => `https://cdn.example.com/icons/${name}.json`,
  defaultTrigger: 'hover',
})

getIconSrc receives the icon name without the li- prefix (e.g. "home" for li-home) and must return the full URL to the Lottie JSON.

Theme colors

Vuetify theme colors are applied automatically. Use the color prop as usual; if it matches a theme color name (e.g. primary, secondary), the icon uses the resolved theme value in primary:${color} format for the lord-icon element.

SSR

The package is SSR-safe: the lord-icon custom element is defined only in the browser (via dynamic import). No defineElement or Lottie code runs on the server, so no SSR errors from missing DOM or Lottie.

License

MIT