Contained 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

icon

Sets the icon to be displayed.

 <template>
    <ContainedIcon icon="mdi:account" />
</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.

styleType

The styleType prop defines the contained icon appearance. It uses the IconContainerStyleType enum.

 <template>
    <ContainedIcon 
        :styleType="IconContainerStyleType.FLAT"
    />
</template>
 

• Type: IconContainerStyleType
• Default: IconContainerStyleType.FLAT

Options

mode

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

Only works when using IconType.COLLECTION.

 <template>
    <ContainedIcon 
        :mode="IconMode.CSS" 
        icon="mdi:account" 
    />
</template>
 

• Type: IconMode
• Default: IconMode.CSS

Options

shape

Defines the contained icon shape. It uses the IconContainerShape enum.

 <template>
    <ContainedIcon :shape="IconContainerShape.CIRCLE" />
</template>
 

• Type: IconContainerShape
• Default: IconContainerShape.CIRCLE

Options

color

Defines the contained icon color. It uses the ColorAccent enum.

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

• Type: ColorAccent
• Default: ColorAccent.NEUTRAL

Options

size

Defines the contained icon size. It uses the IconContainerSize enum.

 <template>
    <ContainedIcon :size="IconContainerSize.XL" />
</template>
 

• Type: IconContainerSize
• Default: IconContainerSize.XL

Options

iconSize

Defines the contained icon size. It uses the IconSize enum.

 <template>
    <ContainedIcon :iconSize="IconSize.LG" />
</template>
 

• Type: IconSize

Documentation pages

• Docs
• Icon library