Icon

Component

Setup

The Icon component uses the Nuxt Icon module to render icons.

Please, make sure you have the Nuxt Icon module installed and configured in your Nuxt project.

In order to use icon collections, decide whether you want to use local setup or server-served icons.

Local setup

Install the desired icon collection:

 npm install @iconify-json/collection-name
 

Server-served icons

Configure the server bundle to include the desired icon collections:

 export default defineNuxtConfig({
    icon: {
        serverBundle: {
            collections: ['mdi'] 
        }
    }
})
 

Props

Usage

name

Sets the name of the icon to be displayed. Uses the collection-name:icon-name format.

 <template>
    <Icon name="mdi:help" />
</template>
 

• Type: string
• Default: 'mdi:help'

Custom icon collections

To use custom icon collections, you need to configure them in your nuxt.config.ts file. Here's an example of how to add a custom icon collection:

 export default defineNuxtConfig({
    modules: [
    '@nuxt/icon'
    ],
    icon: {
        customCollections: [
            {
                prefix: 'my-icon',
                dir: './assets/my-icons',
                // if you want to include all the icons in nested directories:
                // recursive: true,
            },
        ],
    },
})
 

For further information, please refer to the Nuxt Icon module documentation.

mode

Sets the rendering mode of the icon. It uses the IconMode enum.

Only works when using IconType.COLLECTION.

 <template>
    <Icon 
        :mode="IconMode.CSS" 
        icon="mdi:help" 
    />
</template>
 

• Type: IconMode
• Default: IconMode.CSS

Options

size

Sets the size of the icon. Uses the IconSize enum.

 <template>
    <Icon :size="IconSize.LG" />
</template>
 

• Type: IconSize
• Default: IconSize.MD

Options

color

Sets the color of the icon. Uses the ColorAccent enum.

 <template>
    <Icon :color="ColorAccent.SUCCESS" />
</template>
 

• Type: ColorAccent
• Default: ColorAccent.PRIMARY_BRAND

Options

svgCustomize

A callback function that allows you to customize the SVG content of the icon before it is rendered. This function receives the SVG string as an argument and should return the modified SVG string.

It only works when using IconType.COLLECTION with mode="svg".

 <template>
    <Icon 
        icon="mdi:account" 
        :svgCustomize="customizeSVG" 
        type="collection" 
        mode="svg" 
    />
</template>
<script setup lang="ts">
// Define the customize function to modify SVG content
const customizeSVG = (content: string, name: string, prefix: string, provider: string) => {
  if (prefix !== 'tabler') return content // Ignore Prefix

  return content
    .replace(/stroke-width="[^"]*"/g, `stroke-width="2"`) // Change stroke width to 2
    .replace(/stroke="[^"]*"/g, `stroke="#FF5733"`) // Change stroke color to red
    .replace(/fill="[^"]*"/g, `fill="#FF5733"`) // Change fill color to red
    .replace(/animation-duration="[^"]*"/g, `animation-duration="1s"`) // Change animation duration to 1s (for animated icons)
    .replace(/opacity="[^"]*"/g, `opacity="0.8"`);// Change opacity to 0.8
}
</script>
 

• Type: CollectionCustomizeCallback

CollectionCustomizeCallback type

 type CollectionCustomizeCallback = (
    svg: string,
    name?: string,
    prefix?: string,
    provider?: string,
) => string
 

iconClass

Adds custom CSS classes to the icon element.

 <template>
    <Icon icon="mdi:account" iconClass="custom-icon-class" />
</template>
 

• Type: string | string[]

Documentation pages

• Docs
• Icon library