open-index/open-npm huggingface dataset:
npm package: @iconify-prerendered/vue-famicons
Description: Famicons components for Vue. Designed for ease of use and high performance
Author: Alex Kozack
Latest version: 0.28.1754899010

> **Important**
> 
> This project is maintained by developer from Ukraine 🇺🇦
> 
> I do my best, but due to Russia's ongoing full-scale invasion of Ukraine, I
> barely have the energy to support open source projects.
>
> If my work has been useful to you, please consider
> [supporting Ukraine](https://stand-with-ukraine.pp.ua/) or
> [me personally](https://send.monobank.ua/6SmojkkR9i).
>
> Even your **$1** has an impact!

---

# Famicons components for Vue

Designed for ease of use and high performance. Each icon in set is a standalone
component.

## Features

- **Easy to use**
  - No plugins required! Compatible with any build tools.
  - Designed for the best compatibility with IDE auto-completion
    ([Demo](https://twitter.com/alex_kozack/status/1560608558127140865)).
  - Zero dependencies.
  - SSR / SSG friendly.
  - TypeScript support.
- **High performance**
  - Does not require any external resources like fonts, css, images.
  - The icon code is embedded in your bundle.
  - Supports tree shaking, so only those icons that you have used will be
    included in the bundle.
  - Works offline.
- Powered by [iconify](https://iconify.design/).

## Usage

```vue
<script setup>
// Import components as usual
import {
	IconBackspaceOutline,
	IconHomeSharp,
	IconBluetoothOutline,
	IconGlassesSharp,
	IconResize,
	IconFunnelSharp,
} from '@iconify-prerendered/vue-famicons'
</script>

<template>
	<!-- And just use it in template -->
  	<IconBackspaceOutline/>
	<IconHomeSharp/>
	<IconBluetoothOutline/>
	<IconGlassesSharp/>
	<IconResize/>
	<IconFunnelSharp/>
</template>
```

Only these three icons will be included in your bundle. Your bundler may
tree-shake all other icons.

That's all you need. No plugins, extra configs, IDE extensions or something
else.

## Customizing icon default attributes

By default, all icons have only two attributes: `role="img"` and
`aria-hidden="true"`. While you are free to redefine these attributes or add new
ones for each icon, you might want to apply certain attributes, such as `class`
or `style`, to all icons within a set.

To achieve this, you can re-export icons through a `new Proxy` and include
default attributes

```javascript
import * as defaultIcons from '@iconify-prerendered/vue-famicons';

// accessing to icon through this Proxy will add additional attributes
export const themedIcons = new Proxy({}, {
  get(_, iconKey) {
    return () =>
      defaultIcons[iconKey]({
        class: 'pre-defined-class',
        // ... any other attributes
      });
  },
});
```

See [full docs](https://github.com/cawa-93/iconify-prerendered/#readme) or
[other available icons sets](https://github.com/cawa-93/iconify-prerendered/#available-icons-sets).
npm package: @iconify-prerendered/vue-fe
Description: Feather Icon components for Vue. Designed for ease of use and high performance
Author: Alex Kozack
Latest version: 0.28.1754899017

> **Important**
> 
> This project is maintained by developer from Ukraine 🇺🇦
> 
> I do my best, but due to Russia's ongoing full-scale invasion of Ukraine, I
> barely have the energy to support open source projects.
>
> If my work has been useful to you, please consider
> [supporting Ukraine](https://stand-with-ukraine.pp.ua/) or
> [me personally](https://send.monobank.ua/6SmojkkR9i).
>
> Even your **$1** has an impact!

---

# Feather Icon components for Vue

Designed for ease of use and high performance. Each icon in set is a standalone
component.

## Features

- **Easy to use**
  - No plugins required! Compatible with any build tools.
  - Designed for the best compatibility with IDE auto-completion
    ([Demo](https://twitter.com/alex_kozack/status/1560608558127140865)).
  - Zero dependencies.
  - SSR / SSG friendly.
  - TypeScript support.
- **High performance**
  - Does not require any external resources like fonts, css, images.
  - The icon code is embedded in your bundle.
  - Supports tree shaking, so only those icons that you have used will be
    included in the bundle.
  - Works offline.
- Powered by [iconify](https://iconify.design/).

## Usage

```vue
<script setup>
// Import components as usual
import {
	IconAddCart,
	IconComments,
	IconLinkExternal,
	IconCheck,
	IconBolt,
	IconMap,
} from '@iconify-prerendered/vue-fe'
</script>

<template>
	<!-- And just use it in template -->
  	<IconAddCart/>
	<IconComments/>
	<IconLinkExternal/>
	<IconCheck/>
	<IconBolt/>
	<IconMap/>
</template>
```

Only these three icons will be included in your bundle. Your bundler may
tree-shake all other icons.

That's all you need. No plugins, extra configs, IDE extensions or something
else.

## Customizing icon default attributes

By default, all icons have only two attributes: `role="img"` and
`aria-hidden="true"`. While you are free to redefine these attributes or add new
ones for each icon, you might want to apply certain attributes, such as `class`
or `style`, to all icons within a set.

To achieve this, you can re-export icons through a `new Proxy` and include
default attributes

```javascript
import * as defaultIcons from '@iconify-prerendered/vue-fe';

// accessing to icon through this Proxy will add additional attributes
export const themedIcons = new Proxy({}, {
  get(_, iconKey) {
    return () =>
      defaultIcons[iconKey]({
        class: 'pre-defined-class',
        // ... any other attributes
      });
  },
});
```

See [full docs](https://github.com/cawa-93/iconify-prerendered/#readme) or
[other available icons sets](https://github.com/cawa-93/iconify-prerendered/#available-icons-sets).
npm package: @iconify-prerendered/vue-feather
Description: Feather Icons components for Vue. Designed for ease of use and high performance
Author: Alex Kozack
Latest version: 0.28.1722793403

> **Important**
> 
> This project is maintained by developer from Ukraine 🇺🇦
> 
> I do my best, but due to Russia's ongoing full-scale invasion of Ukraine, I
> barely have the energy to support open source projects.
>
> If my work has been useful to you, please consider
> [supporting Ukraine](https://stand-with-ukraine.pp.ua/) or
> [me personally](https://send.monobank.ua/6SmojkkR9i).
>
> Even your **$1** has an impact!

---

# Feather Icons components for Vue

Designed for ease of use and high performance. Each icon in set is a standalone
component.

## Features

- **Easy to use**
  - No plugins required! Compatible with any build tools.
  - Designed for the best compatibility with IDE auto-completion
    ([Demo](https://twitter.com/alex_kozack/status/1560608558127140865)).
  - Zero dependencies.
  - SSR / SSG friendly.
  - TypeScript support.
- **High performance**
  - Does not require any external resources like fonts, css, images.
  - The icon code is embedded in your bundle.
  - Supports tree shaking, so only those icons that you have used will be
    included in the bundle.
  - Works offline.
- Powered by [iconify](https://iconify.design/).

## Usage

```vue
<script setup>
// Import components as usual
import {
	IconCheckCircle,
	IconAward,
	IconHome,
} from '@iconify-prerendered/vue-feather'
</script>

<template>
	<!-- And just use it in template -->
  	<IconCheckCircle/>
	<IconAward/>
	<IconHome/>
</template>
```

Only these three icons will be included in your bundle. Your bundler may
tree-shake all other icons.

That's all you need. No plugins, extra configs, IDE extensions or something
else.

## Customizing icon default attributes

By default, all icons have only two attributes: `role="img"` and
`aria-hidden="true"`. While you are free to redefine these attributes or add new
ones for each icon, you might want to apply certain attributes, such as `class`
or `style`, to all icons within a set.

To achieve this, you can re-export icons through a `new Proxy` and include
default attributes

```javascript
import * as defaultIcons from '@iconify-prerendered/vue-feather';

// accessing to icon through this Proxy will add additional attributes
export const themedIcons = new Proxy({}, {
  get(_, iconKey) {
    return () =>
      defaultIcons[iconKey]({
        class: 'pre-defined-class',
        // ... any other attributes
      });
  },
});
```

See [full docs](https://github.com/cawa-93/iconify-prerendered/#readme) or
[other available icons sets](https://github.com/cawa-93/iconify-prerendered/#available-icons-sets).
npm package: @iconify-prerendered/vue-flag
Description: Flag Icons components for Vue. Designed for ease of use and high performance
Author: Alex Kozack
Latest version: 0.28.1754899047

> **Important**
> 
> This project is maintained by developer from Ukraine 🇺🇦
> 
> I do my best, but due to Russia's ongoing full-scale invasion of Ukraine, I
> barely have the energy to support open source projects.
>
> If my work has been useful to you, please consider
> [supporting Ukraine](https://stand-with-ukraine.pp.ua/) or
> [me personally](https://send.monobank.ua/6SmojkkR9i).
>
> Even your **$1** has an impact!

---

# Flag Icons components for Vue

Designed for ease of use and high performance. Each icon in set is a standalone
component.

## Features

- **Easy to use**
  - No plugins required! Compatible with any build tools.
  - Designed for the best compatibility with IDE auto-completion
    ([Demo](https://twitter.com/alex_kozack/status/1560608558127140865)).
  - Zero dependencies.
  - SSR / SSG friendly.
  - TypeScript support.
- **High performance**
  - Does not require any external resources like fonts, css, images.
  - The icon code is embedded in your bundle.
  - Supports tree shaking, so only those icons that you have used will be
    included in the bundle.
  - Works offline.
- Powered by [iconify](https://iconify.design/).

## Usage

```vue
<script setup>
// Import components as usual
import {
	IconFr1x1,
	IconDe1x1,
	IconBh1x1,
	IconKr1x1,
	IconEe1x1,
	IconBg1x1,
} from '@iconify-prerendered/vue-flag'
</script>

<template>
	<!-- And just use it in template -->
  	<IconFr1x1/>
	<IconDe1x1/>
	<IconBh1x1/>
	<IconKr1x1/>
	<IconEe1x1/>
	<IconBg1x1/>
</template>
```

Only these three icons will be included in your bundle. Your bundler may
tree-shake all other icons.

That's all you need. No plugins, extra configs, IDE extensions or something
else.

## Customizing icon default attributes

By default, all icons have only two attributes: `role="img"` and
`aria-hidden="true"`. While you are free to redefine these attributes or add new
ones for each icon, you might want to apply certain attributes, such as `class`
or `style`, to all icons within a set.

To achieve this, you can re-export icons through a `new Proxy` and include
default attributes

```javascript
import * as defaultIcons from '@iconify-prerendered/vue-flag';

// accessing to icon through this Proxy will add additional attributes
export const themedIcons = new Proxy({}, {
  get(_, iconKey) {
    return () =>
      defaultIcons[iconKey]({
        class: 'pre-defined-class',
        // ... any other attributes
      });
  },
});
```

See [full docs](https://github.com/cawa-93/iconify-prerendered/#readme) or
[other available icons sets](https://github.com/cawa-93/iconify-prerendered/#available-icons-sets).
npm package: @iconify-prerendered/vue-flagpack
Description: Flagpack components for Vue. Designed for ease of use and high performance
Author: Alex Kozack
Latest version: 0.28.1754899060

> **Important**
> 
> This project is maintained by developer from Ukraine 🇺🇦
> 
> I do my best, but due to Russia's ongoing full-scale invasion of Ukraine, I
> barely have the energy to support open source projects.
>
> If my work has been useful to you, please consider
> [supporting Ukraine](https://stand-with-ukraine.pp.ua/) or
> [me personally](https://send.monobank.ua/6SmojkkR9i).
>
> Even your **$1** has an impact!

---

# Flagpack components for Vue

Designed for ease of use and high performance. Each icon in set is a standalone
component.

## Features

- **Easy to use**
  - No plugins required! Compatible with any build tools.
  - Designed for the best compatibility with IDE auto-completion
    ([Demo](https://twitter.com/alex_kozack/status/1560608558127140865)).
  - Zero dependencies.
  - SSR / SSG friendly.
  - TypeScript support.
- **High performance**
  - Does not require any external resources like fonts, css, images.
  - The icon code is embedded in your bundle.
  - Supports tree shaking, so only those icons that you have used will be
    included in the bundle.
  - Works offline.
- Powered by [iconify](https://iconify.design/).

## Usage

```vue
<script setup>
// Import components as usual
import {
	IconCi,
	IconGbUkm,
	IconWf,
	IconDe,
	IconIe,
	IconTh,
} from '@iconify-prerendered/vue-flagpack'
</script>

<template>
	<!-- And just use it in template -->
  	<IconCi/>
	<IconGbUkm/>
	<IconWf/>
	<IconDe/>
	<IconIe/>
	<IconTh/>
</template>
```

Only these three icons will be included in your bundle. Your bundler may
tree-shake all other icons.

That's all you need. No plugins, extra configs, IDE extensions or something
else.

## Customizing icon default attributes

By default, all icons have only two attributes: `role="img"` and
`aria-hidden="true"`. While you are free to redefine these attributes or add new
ones for each icon, you might want to apply certain attributes, such as `class`
or `style`, to all icons within a set.

To achieve this, you can re-export icons through a `new Proxy` and include
default attributes

```javascript
import * as defaultIcons from '@iconify-prerendered/vue-flagpack';

// accessing to icon through this Proxy will add additional attributes
export const themedIcons = new Proxy({}, {
  get(_, iconKey) {
    return () =>
      defaultIcons[iconKey]({
        class: 'pre-defined-class',
        // ... any other attributes
      });
  },
});
```

See [full docs](https://github.com/cawa-93/iconify-prerendered/#readme) or
[other available icons sets](https://github.com/cawa-93/iconify-prerendered/#available-icons-sets).
npm package: @iconify-prerendered/vue-flat-color-icons
Description: Flat Color Icons components for Vue. Designed for ease of use and high performance
Author: Alex Kozack
Latest version: 0.28.1754899066

> **Important**
> 
> This project is maintained by developer from Ukraine 🇺🇦
> 
> I do my best, but due to Russia's ongoing full-scale invasion of Ukraine, I
> barely have the energy to support open source projects.
>
> If my work has been useful to you, please consider
> [supporting Ukraine](https://stand-with-ukraine.pp.ua/) or
> [me personally](https://send.monobank.ua/6SmojkkR9i).
>
> Even your **$1** has an impact!

---

# Flat Color Icons components for Vue

Designed for ease of use and high performance. Each icon in set is a standalone
component.

## Features

- **Easy to use**
  - No plugins required! Compatible with any build tools.
  - Designed for the best compatibility with IDE auto-completion
    ([Demo](https://twitter.com/alex_kozack/status/1560608558127140865)).
  - Zero dependencies.
  - SSR / SSG friendly.
  - TypeScript support.
- **High performance**
  - Does not require any external resources like fonts, css, images.
  - The icon code is embedded in your bundle.
  - Supports tree shaking, so only those icons that you have used will be
    included in the bundle.
  - Works offline.
- Powered by [iconify](https://iconify.design/).

## Usage

```vue
<script setup>
// Import components as usual
import {
	IconEditImage,
	IconDonate,
	IconPlanner,
	IconExpand,
	IconMusic,
	IconCheckmark,
} from '@iconify-prerendered/vue-flat-color-icons'
</script>

<template>
	<!-- And just use it in template -->
  	<IconEditImage/>
	<IconDonate/>
	<IconPlanner/>
	<IconExpand/>
	<IconMusic/>
	<IconCheckmark/>
</template>
```

Only these three icons will be included in your bundle. Your bundler may
tree-shake all other icons.

That's all you need. No plugins, extra configs, IDE extensions or something
else.

## Customizing icon default attributes

By default, all icons have only two attributes: `role="img"` and
`aria-hidden="true"`. While you are free to redefine these attributes or add new
ones for each icon, you might want to apply certain attributes, such as `class`
or `style`, to all icons within a set.

To achieve this, you can re-export icons through a `new Proxy` and include
default attributes

```javascript
import * as defaultIcons from '@iconify-prerendered/vue-flat-color-icons';

// accessing to icon through this Proxy will add additional attributes
export const themedIcons = new Proxy({}, {
  get(_, iconKey) {
    return () =>
      defaultIcons[iconKey]({
        class: 'pre-defined-class',
        // ... any other attributes
      });
  },
});
```

See [full docs](https://github.com/cawa-93/iconify-prerendered/#readme) or
[other available icons sets](https://github.com/cawa-93/iconify-prerendered/#available-icons-sets).
npm package: @iconify-prerendered/vue-flat-ui
Description: Flat UI Icons components for Vue. Designed for ease of use and high performance
Author: Alex Kozack
Latest version: 0.28.1754899075

> **Important**
> 
> This project is maintained by developer from Ukraine 🇺🇦
> 
> I do my best, but due to Russia's ongoing full-scale invasion of Ukraine, I
> barely have the energy to support open source projects.
>
> If my work has been useful to you, please consider
> [supporting Ukraine](https://stand-with-ukraine.pp.ua/) or
> [me personally](https://send.monobank.ua/6SmojkkR9i).
>
> Even your **$1** has an impact!

---

# Flat UI Icons components for Vue

Designed for ease of use and high performance. Each icon in set is a standalone
component.

## Features

- **Easy to use**
  - No plugins required! Compatible with any build tools.
  - Designed for the best compatibility with IDE auto-completion
    ([Demo](https://twitter.com/alex_kozack/status/1560608558127140865)).
  - Zero dependencies.
  - SSR / SSG friendly.
  - TypeScript support.
- **High performance**
  - Does not require any external resources like fonts, css, images.
  - The icon code is embedded in your bundle.
  - Supports tree shaking, so only those icons that you have used will be
    included in the bundle.
  - Works offline.
- Powered by [iconify](https://iconify.design/).

## Usage

```vue
<script setup>
// Import components as usual
import {
	IconMap,
	IconGraph,
	IconImac,
} from '@iconify-prerendered/vue-flat-ui'
</script>

<template>
	<!-- And just use it in template -->
  	<IconMap/>
	<IconGraph/>
	<IconImac/>
</template>
```

Only these three icons will be included in your bundle. Your bundler may
tree-shake all other icons.

That's all you need. No plugins, extra configs, IDE extensions or something
else.

## Customizing icon default attributes

By default, all icons have only two attributes: `role="img"` and
`aria-hidden="true"`. While you are free to redefine these attributes or add new
ones for each icon, you might want to apply certain attributes, such as `class`
or `style`, to all icons within a set.

To achieve this, you can re-export icons through a `new Proxy` and include
default attributes

```javascript
import * as defaultIcons from '@iconify-prerendered/vue-flat-ui';

// accessing to icon through this Proxy will add additional attributes
export const themedIcons = new Proxy({}, {
  get(_, iconKey) {
    return () =>
      defaultIcons[iconKey]({
        class: 'pre-defined-class',
        // ... any other attributes
      });
  },
});
```

See [full docs](https://github.com/cawa-93/iconify-prerendered/#readme) or
[other available icons sets](https://github.com/cawa-93/iconify-prerendered/#available-icons-sets).
npm package: @iconify-prerendered/vue-flowbite
Description: Flowbite Icons components for Vue. Designed for ease of use and high performance
Author: Alex Kozack
Latest version: 0.28.1754899090

> **Important**
> 
> This project is maintained by developer from Ukraine 🇺🇦
> 
> I do my best, but due to Russia's ongoing full-scale invasion of Ukraine, I
> barely have the energy to support open source projects.
>
> If my work has been useful to you, please consider
> [supporting Ukraine](https://stand-with-ukraine.pp.ua/) or
> [me personally](https://send.monobank.ua/6SmojkkR9i).
>
> Even your **$1** has an impact!

---

# Flowbite Icons components for Vue

Designed for ease of use and high performance. Each icon in set is a standalone
component.

## Features

- **Easy to use**
  - No plugins required! Compatible with any build tools.
  - Designed for the best compatibility with IDE auto-completion
    ([Demo](https://twitter.com/alex_kozack/status/1560608558127140865)).
  - Zero dependencies.
  - SSR / SSG friendly.
  - TypeScript support.
- **High performance**
  - Does not require any external resources like fonts, css, images.
  - The icon code is embedded in your bundle.
  - Supports tree shaking, so only those icons that you have used will be
    included in the bundle.
  - Works offline.
- Powered by [iconify](https://iconify.design/).

## Usage

```vue
<script setup>
// Import components as usual
import {
	IconUserOutline,
	IconVueSolid,
	IconListOutline,
	IconBarsFromLeftOutline,
	IconLetterUnderlineOutline,
	IconTableColumnSolid,
} from '@iconify-prerendered/vue-flowbite'
</script>

<template>
	<!-- And just use it in template -->
  	<IconUserOutline/>
	<IconVueSolid/>
	<IconListOutline/>
	<IconBarsFromLeftOutline/>
	<IconLetterUnderlineOutline/>
	<IconTableColumnSolid/>
</template>
```

Only these three icons will be included in your bundle. Your bundler may
tree-shake all other icons.

That's all you need. No plugins, extra configs, IDE extensions or something
else.

## Customizing icon default attributes

By default, all icons have only two attributes: `role="img"` and
`aria-hidden="true"`. While you are free to redefine these attributes or add new
ones for each icon, you might want to apply certain attributes, such as `class`
or `style`, to all icons within a set.

To achieve this, you can re-export icons through a `new Proxy` and include
default attributes

```javascript
import * as defaultIcons from '@iconify-prerendered/vue-flowbite';

// accessing to icon through this Proxy will add additional attributes
export const themedIcons = new Proxy({}, {
  get(_, iconKey) {
    return () =>
      defaultIcons[iconKey]({
        class: 'pre-defined-class',
        // ... any other attributes
      });
  },
});
```

See [full docs](https://github.com/cawa-93/iconify-prerendered/#readme) or
[other available icons sets](https://github.com/cawa-93/iconify-prerendered/#available-icons-sets).
npm package: @iconify-prerendered/vue-fluent
Description: Fluent UI System Icons components for Vue. Designed for ease of use and high performance
Author: Alex Kozack
Latest version: 0.28.1753510877

> **Important**
> 
> This project is maintained by developer from Ukraine 🇺🇦
> 
> I do my best, but due to Russia's ongoing full-scale invasion of Ukraine, I
> barely have the energy to support open source projects.
>
> If my work has been useful to you, please consider
> [supporting Ukraine](https://stand-with-ukraine.pp.ua/) or
> [me personally](https://send.monobank.ua/6SmojkkR9i).
>
> Even your **$1** has an impact!

---

# Fluent UI System Icons components for Vue

Designed for ease of use and high performance. Each icon in set is a standalone
component.

## Features

- **Easy to use**
  - No plugins required! Compatible with any build tools.
  - Designed for the best compatibility with IDE auto-completion
    ([Demo](https://twitter.com/alex_kozack/status/1560608558127140865)).
  - Zero dependencies.
  - SSR / SSG friendly.
  - TypeScript support.
- **High performance**
  - Does not require any external resources like fonts, css, images.
  - The icon code is embedded in your bundle.
  - Supports tree shaking, so only those icons that you have used will be
    included in the bundle.
  - Works offline.
- Powered by [iconify](https://iconify.design/).

## Usage

```vue
<script setup>
// Import components as usual
import {
	IconZoomOut24Filled,
	IconDrinkCoffee24Regular,
	IconPhotoFilter24Regular,
	IconCheckmark24Filled,
	IconOval24Filled,
	IconCloud24Filled,
} from '@iconify-prerendered/vue-fluent'
</script>

<template>
	<!-- And just use it in template -->
  	<IconZoomOut24Filled/>
	<IconDrinkCoffee24Regular/>
	<IconPhotoFilter24Regular/>
	<IconCheckmark24Filled/>
	<IconOval24Filled/>
	<IconCloud24Filled/>
</template>
```

Only these three icons will be included in your bundle. Your bundler may
tree-shake all other icons.

That's all you need. No plugins, extra configs, IDE extensions or something
else.

## Customizing icon default attributes

By default, all icons have only two attributes: `role="img"` and
`aria-hidden="true"`. While you are free to redefine these attributes or add new
ones for each icon, you might want to apply certain attributes, such as `class`
or `style`, to all icons within a set.

To achieve this, you can re-export icons through a `new Proxy` and include
default attributes

```javascript
import * as defaultIcons from '@iconify-prerendered/vue-fluent';

// accessing to icon through this Proxy will add additional attributes
export const themedIcons = new Proxy({}, {
  get(_, iconKey) {
    return () =>
      defaultIcons[iconKey]({
        class: 'pre-defined-class',
        // ... any other attributes
      });
  },
});
```

See [full docs](https://github.com/cawa-93/iconify-prerendered/#readme) or
[other available icons sets](https://github.com/cawa-93/iconify-prerendered/#available-icons-sets).
npm package: @iconify-prerendered/vue-fluent-color
Description: Fluent UI System Color Icons components for Vue. Designed for ease of use and high performance
Author: Alex Kozack
Latest version: 0.28.1754899131

> **Important**
> 
> This project is maintained by developer from Ukraine 🇺🇦
> 
> I do my best, but due to Russia's ongoing full-scale invasion of Ukraine, I
> barely have the energy to support open source projects.
>
> If my work has been useful to you, please consider
> [supporting Ukraine](https://stand-with-ukraine.pp.ua/) or
> [me personally](https://send.monobank.ua/6SmojkkR9i).
>
> Even your **$1** has an impact!

---

# Fluent UI System Color Icons components for Vue

Designed for ease of use and high performance. Each icon in set is a standalone
component.

## Features

- **Easy to use**
  - No plugins required! Compatible with any build tools.
  - Designed for the best compatibility with IDE auto-completion
    ([Demo](https://twitter.com/alex_kozack/status/1560608558127140865)).
  - Zero dependencies.
  - SSR / SSG friendly.
  - TypeScript support.
- **High performance**
  - Does not require any external resources like fonts, css, images.
  - The icon code is embedded in your bundle.
  - Supports tree shaking, so only those icons that you have used will be
    included in the bundle.
  - Works offline.
- Powered by [iconify](https://iconify.design/).

## Usage

```vue
<script setup>
// Import components as usual
import {
	IconMic20,
	IconAlert32,
	IconWrench24,
	IconShifts32,
	IconAddCircle16,
	IconShield24,
} from '@iconify-prerendered/vue-fluent-color'
</script>

<template>
	<!-- And just use it in template -->
  	<IconMic20/>
	<IconAlert32/>
	<IconWrench24/>
	<IconShifts32/>
	<IconAddCircle16/>
	<IconShield24/>
</template>
```

Only these three icons will be included in your bundle. Your bundler may
tree-shake all other icons.

That's all you need. No plugins, extra configs, IDE extensions or something
else.

## Customizing icon default attributes

By default, all icons have only two attributes: `role="img"` and
`aria-hidden="true"`. While you are free to redefine these attributes or add new
ones for each icon, you might want to apply certain attributes, such as `class`
or `style`, to all icons within a set.

To achieve this, you can re-export icons through a `new Proxy` and include
default attributes

```javascript
import * as defaultIcons from '@iconify-prerendered/vue-fluent-color';

// accessing to icon through this Proxy will add additional attributes
export const themedIcons = new Proxy({}, {
  get(_, iconKey) {
    return () =>
      defaultIcons[iconKey]({
        class: 'pre-defined-class',
        // ... any other attributes
      });
  },
});
```

See [full docs](https://github.com/cawa-93/iconify-prerendered/#readme) or
[other available icons sets](https://github.com/cawa-93/iconify-prerendered/#available-icons-sets).
npm package: @iconify-prerendered/vue-fluent-emoji
Description: Fluent Emoji components for Vue. Designed for ease of use and high performance
Author: Alex Kozack
Latest version: 0.28.1754898203

> **Important**
> 
> This project is maintained by developer from Ukraine 🇺🇦
> 
> I do my best, but due to Russia's ongoing full-scale invasion of Ukraine, I
> barely have the energy to support open source projects.
>
> If my work has been useful to you, please consider
> [supporting Ukraine](https://stand-with-ukraine.pp.ua/) or
> [me personally](https://send.monobank.ua/6SmojkkR9i).
>
> Even your **$1** has an impact!

---

# Fluent Emoji components for Vue

Designed for ease of use and high performance. Each icon in set is a standalone
component.

## Features

- **Easy to use**
  - No plugins required! Compatible with any build tools.
  - Designed for the best compatibility with IDE auto-completion
    ([Demo](https://twitter.com/alex_kozack/status/1560608558127140865)).
  - Zero dependencies.
  - SSR / SSG friendly.
  - TypeScript support.
- **High performance**
  - Does not require any external resources like fonts, css, images.
  - The icon code is embedded in your bundle.
  - Supports tree shaking, so only those icons that you have used will be
    included in the bundle.
  - Works offline.
- Powered by [iconify](https://iconify.design/).

## Usage

```vue
<script setup>
// Import components as usual
import {
	IconAvocado,
	IconTicket,
	IconStraightRuler,
} from '@iconify-prerendered/vue-fluent-emoji'
</script>

<template>
	<!-- And just use it in template -->
  	<IconAvocado/>
	<IconTicket/>
	<IconStraightRuler/>
</template>
```

Only these three icons will be included in your bundle. Your bundler may
tree-shake all other icons.

That's all you need. No plugins, extra configs, IDE extensions or something
else.

## Customizing icon default attributes

By default, all icons have only two attributes: `role="img"` and
`aria-hidden="true"`. While you are free to redefine these attributes or add new
ones for each icon, you might want to apply certain attributes, such as `class`
or `style`, to all icons within a set.

To achieve this, you can re-export icons through a `new Proxy` and include
default attributes

```javascript
import * as defaultIcons from '@iconify-prerendered/vue-fluent-emoji';

// accessing to icon through this Proxy will add additional attributes
export const themedIcons = new Proxy({}, {
  get(_, iconKey) {
    return () =>
      defaultIcons[iconKey]({
        class: 'pre-defined-class',
        // ... any other attributes
      });
  },
});
```

See [full docs](https://github.com/cawa-93/iconify-prerendered/#readme) or
[other available icons sets](https://github.com/cawa-93/iconify-prerendered/#available-icons-sets).
npm package: @iconify-prerendered/vue-fluent-emoji-flat
Description: Fluent Emoji Flat components for Vue. Designed for ease of use and high performance
Author: Alex Kozack
Latest version: 0.28.1754899190

> **Important**
> 
> This project is maintained by developer from Ukraine 🇺🇦
> 
> I do my best, but due to Russia's ongoing full-scale invasion of Ukraine, I
> barely have the energy to support open source projects.
>
> If my work has been useful to you, please consider
> [supporting Ukraine](https://stand-with-ukraine.pp.ua/) or
> [me personally](https://send.monobank.ua/6SmojkkR9i).
>
> Even your **$1** has an impact!

---

# Fluent Emoji Flat components for Vue

Designed for ease of use and high performance. Each icon in set is a standalone
component.

## Features

- **Easy to use**
  - No plugins required! Compatible with any build tools.
  - Designed for the best compatibility with IDE auto-completion
    ([Demo](https://twitter.com/alex_kozack/status/1560608558127140865)).
  - Zero dependencies.
  - SSR / SSG friendly.
  - TypeScript support.
- **High performance**
  - Does not require any external resources like fonts, css, images.
  - The icon code is embedded in your bundle.
  - Supports tree shaking, so only those icons that you have used will be
    included in the bundle.
  - Works offline.
- Powered by [iconify](https://iconify.design/).

## Usage

```vue
<script setup>
// Import components as usual
import {
	IconAvocado,
	IconTicket,
	IconStraightRuler,
	IconDiamondSuit,
	IconEgg,
	IconYinYang,
} from '@iconify-prerendered/vue-fluent-emoji-flat'
</script>

<template>
	<!-- And just use it in template -->
  	<IconAvocado/>
	<IconTicket/>
	<IconStraightRuler/>
	<IconDiamondSuit/>
	<IconEgg/>
	<IconYinYang/>
</template>
```

Only these three icons will be included in your bundle. Your bundler may
tree-shake all other icons.

That's all you need. No plugins, extra configs, IDE extensions or something
else.

## Customizing icon default attributes

By default, all icons have only two attributes: `role="img"` and
`aria-hidden="true"`. While you are free to redefine these attributes or add new
ones for each icon, you might want to apply certain attributes, such as `class`
or `style`, to all icons within a set.

To achieve this, you can re-export icons through a `new Proxy` and include
default attributes

```javascript
import * as defaultIcons from '@iconify-prerendered/vue-fluent-emoji-flat';

// accessing to icon through this Proxy will add additional attributes
export const themedIcons = new Proxy({}, {
  get(_, iconKey) {
    return () =>
      defaultIcons[iconKey]({
        class: 'pre-defined-class',
        // ... any other attributes
      });
  },
});
```

See [full docs](https://github.com/cawa-93/iconify-prerendered/#readme) or
[other available icons sets](https://github.com/cawa-93/iconify-prerendered/#available-icons-sets).
npm package: @iconify-prerendered/vue-fluent-emoji-high-contrast
Description: Fluent Emoji High Contrast components for Vue. Designed for ease of use and high performance
Author: Alex Kozack
Latest version: 0.28.1754899221

> **Important**
> 
> This project is maintained by developer from Ukraine 🇺🇦
> 
> I do my best, but due to Russia's ongoing full-scale invasion of Ukraine, I
> barely have the energy to support open source projects.
>
> If my work has been useful to you, please consider
> [supporting Ukraine](https://stand-with-ukraine.pp.ua/) or
> [me personally](https://send.monobank.ua/6SmojkkR9i).
>
> Even your **$1** has an impact!

---

# Fluent Emoji High Contrast components for Vue

Designed for ease of use and high performance. Each icon in set is a standalone
component.

## Features

- **Easy to use**
  - No plugins required! Compatible with any build tools.
  - Designed for the best compatibility with IDE auto-completion
    ([Demo](https://twitter.com/alex_kozack/status/1560608558127140865)).
  - Zero dependencies.
  - SSR / SSG friendly.
  - TypeScript support.
- **High performance**
  - Does not require any external resources like fonts, css, images.
  - The icon code is embedded in your bundle.
  - Supports tree shaking, so only those icons that you have used will be
    included in the bundle.
  - Works offline.
- Powered by [iconify](https://iconify.design/).

## Usage

```vue
<script setup>
// Import components as usual
import {
	IconAvocado,
	IconTicket,
	IconStraightRuler,
	IconDiamondSuit,
	IconEgg,
	IconYinYang,
} from '@iconify-prerendered/vue-fluent-emoji-high-contrast'
</script>

<template>
	<!-- And just use it in template -->
  	<IconAvocado/>
	<IconTicket/>
	<IconStraightRuler/>
	<IconDiamondSuit/>
	<IconEgg/>
	<IconYinYang/>
</template>
```

Only these three icons will be included in your bundle. Your bundler may
tree-shake all other icons.

That's all you need. No plugins, extra configs, IDE extensions or something
else.

## Customizing icon default attributes

By default, all icons have only two attributes: `role="img"` and
`aria-hidden="true"`. While you are free to redefine these attributes or add new
ones for each icon, you might want to apply certain attributes, such as `class`
or `style`, to all icons within a set.

To achieve this, you can re-export icons through a `new Proxy` and include
default attributes

```javascript
import * as defaultIcons from '@iconify-prerendered/vue-fluent-emoji-high-contrast';

// accessing to icon through this Proxy will add additional attributes
export const themedIcons = new Proxy({}, {
  get(_, iconKey) {
    return () =>
      defaultIcons[iconKey]({
        class: 'pre-defined-class',
        // ... any other attributes
      });
  },
});
```

See [full docs](https://github.com/cawa-93/iconify-prerendered/#readme) or
[other available icons sets](https://github.com/cawa-93/iconify-prerendered/#available-icons-sets).
npm package: @iconify-prerendered/vue-fluent-mdl2
Description: Fluent UI MDL2 components for Vue. Designed for ease of use and high performance
Author: Alex Kozack
Latest version: 0.28.1712503060

> **Important**
> 
> This project is maintained by developer from Ukraine 🇺🇦
> 
> I do my best, but due to Russia's ongoing full-scale invasion of Ukraine, I
> barely have the energy to support open source projects.
>
> If my work has been useful to you, please consider
> [supporting Ukraine](https://stand-with-ukraine.pp.ua/) or
> [me personally](https://send.monobank.ua/6SmojkkR9i).
>
> Even your **$1** has an impact!

---

# Fluent UI MDL2 components for Vue

Designed for ease of use and high performance. Each icon in set is a standalone
component.

## Features

- **Easy to use**
  - No plugins required! Compatible with any build tools.
  - Designed for the best compatibility with IDE auto-completion
    ([Demo](https://twitter.com/alex_kozack/status/1560608558127140865)).
  - Zero dependencies.
  - SSR / SSG friendly.
  - TypeScript support.
- **High performance**
  - Does not require any external resources like fonts, css, images.
  - The icon code is embedded in your bundle.
  - Supports tree shaking, so only those icons that you have used will be
    included in the bundle.
  - Works offline.
- Powered by [iconify](https://iconify.design/).

## Usage

```vue
<script setup>
// Import components as usual
import {
	IconFlow,
	IconHome,
	IconSwitch,
	IconCaretSolid16,
	IconAccept,
	IconWindDirection,
} from '@iconify-prerendered/vue-fluent-mdl2'
</script>

<template>
	<!-- And just use it in template -->
  	<IconFlow/>
	<IconHome/>
	<IconSwitch/>
	<IconCaretSolid16/>
	<IconAccept/>
	<IconWindDirection/>
</template>
```

Only these three icons will be included in your bundle. Your bundler may
tree-shake all other icons.

That's all you need. No plugins, extra configs, IDE extensions or something
else.

## Customizing icon default attributes

By default, all icons have only two attributes: `role="img"` and
`aria-hidden="true"`. While you are free to redefine these attributes or add new
ones for each icon, you might want to apply certain attributes, such as `class`
or `style`, to all icons within a set.

To achieve this, you can re-export icons through a `new Proxy` and include
default attributes

```javascript
import * as defaultIcons from '@iconify-prerendered/vue-fluent-mdl2';

// accessing to icon through this Proxy will add additional attributes
export const themedIcons = new Proxy({}, {
  get(_, iconKey) {
    return () =>
      defaultIcons[iconKey]({
        class: 'pre-defined-class',
        // ... any other attributes
      });
  },
});
```

See [full docs](https://github.com/cawa-93/iconify-prerendered/#readme) or
[other available icons sets](https://github.com/cawa-93/iconify-prerendered/#available-icons-sets).