remixicon now support Vue 3 officially, this package will continue sync upstream for Vue 2 users, but if you use Vue 3, better use official package!
Remix Icon is a set of open source neutral style system symbols elaborately crafted for designers and developers.
Notics: this package will auto release a new feature version when then upstream package(remixicon) released, if you facing any issues, please open an issue to let me know.
- [x] Types ready
- [x] Support Vue 2 and Vue 3
- [x] Tree-Shaking
npm i vue-remix-icons
Notice: for support Vue 2 & Vue 3 projects, the all imported icons is a Vue file, so you need to use this lib under the JS bundler like vite, webpack or other Vue framework.
<template>
<RiHomeLine />
</tempalte>
<script>
// tree-shaking
import { RiHomeLine } from "vue-remix-icons";
// if not, import the one you needed
import RiHomeLine from "vue-remix-icons/icons/ri-home-line.vue"
export default {
components: {
RiHomeLine,
},
}
</script>
See all icons here: http://remixicon.com/
Note that just change the usage from <i class="ri-home-line"></i>
to import RiHomeLine
.
Transpile vue-remix-icons, see #13.
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
build: {
transpile: ['vue-remix-icons'],
},
})
<RiHomeLine />
Will render as:
<svg class="remixicon ri-home-line">...</svg>
Generated file now kebab-case, reason see #10.
- import RiHomeLine from "vue-remix-icons/icons/RiHomeLine.vue"
+ import RiHomeLine from "vue-remix-icons/icons/ri-home-line.vue"
Apache-2.0 © 2nthony