Xing Icon

Supercharge your app with over 200,000+ icons.

XingIcon.vue

<XingIcon name="lucide:sparkles" />
<XingIcon name="lucide:sparkles" size="1.5em" />
<XingIcon name="lucide:sparkles" size="2em" noobserver />

<XingIcon name="lucide:check" size="2em" style={{ color: 'green' }} noobserver />
<XingIcon name="lucide:check" size="2em" style={{ color: '#8e76dd' }} flip="horizontal" noobserver />
<XingIcon name="lucide:check" size="2em" style={{ color: 'cyan' }} flip="vertical" noobserver />
<XingIcon name="lucide:check" size="2em" style={{ color: 'red' }} noobserver />
<XingIcon name="lucide:check" size="2em" style={{ color: 'orange' }} rotate="90deg" noobserver />
<XingIcon name="lucide:check" size="2em" style={{ color: 'pink' }} rotate="180deg" noobserver />
<XingIcon name="lucide:check" size="2em" style={{ color: 'blue' }} rotate="270deg" noobserver />

Browse your desire icons here.

or here with Icônes by @antfu.

🦄 Features

Full compatibility with Vue & Nuxt.
SSR-friendly, Efficiency mode, enabled by default.
Supports over 200,000 open-source and high-quality icons directly from the Iconify API.
Rich in customization options.

🚀 Installation

Run this command

npm

pnpm

bun

npx nidexingg-ui add icon

Add iconify CDN to app head

This is for Nuxt. If you're using Vue, add it to vite.config.ts/js.

nuxt.config.ts

head: {
  script: [
    {
      src: "https://cdn.jsdelivr.net/npm/iconify-icon@latest/dist/iconify-icon.min.js",
      type: "text/javascript",
    },
  ],
},

Add custom element

This is for Nuxt. If you're on Vue, add it to vite.config.ts/js.

nuxt.config.ts

vue: {
  compilerOptions: {
    isCustomElement: (tag) => tag === "iconify-icon",
  },
},

🥳 That's it.

You can now enjoy adding 200,000+ free and open-source icons into your great app. 🎉

🧑‍🏫 Usage Guide

Props

namerequiredstring

Input your desired icon name here.
Example:ph:address-book-fill

sizestring

default : 1em

Set the size of your icon in em scale.

stylestring

Add any CSS styles to your icon as you wish, such as color, font-size, and more.

noobserverstring

As of version 2.0.0 of the web component, icons are rendered only when visible to the visitor.For long pages with many icons, this significantly improves performance.However, you can opt out of this behavior by adding the noobserver attribute to the web component's HTML, making the icon always visible.

flipstring

An icon can be flipped horizontally and/or vertically. All transformations are done relative to the center of the icon.There are two options for flip transformations: