@iconify-prerendered/vue-ri
v0.28.1730307929
Published
Remix Icon components for Vue. Designed for ease of use and high performance
Downloads
368
Maintainers
Readme
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 or me personally.
Even your $1 has an impact!
Remix 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).
- 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.
Usage
<script setup>
// Import components as usual
import {
IconLock2Line,
IconMarkPenFill,
IconMoonLine,
IconFilter2Fill,
IconText,
IconAddLine,
} from '@iconify-prerendered/vue-ri'
</script>
<template>
<!-- And just use it in template -->
<IconLock2Line/>
<IconMarkPenFill/>
<IconMoonLine/>
<IconFilter2Fill/>
<IconText/>
<IconAddLine/>
</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
import * as defaultIcons from '@iconify-prerendered/vue-ri';
// 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 or other available icons sets.