There are few good npm icon packages work with node project and vue as well. When I try font-awesome for my app (vuejs), it didn't work for me. There is a package solely for vue(Vue2 and Vue3) users,oh vue icons.
Install the package
yarn add oh-vue-icons
or
npm install oh-vue-icons
Global import
Let's got to entry point file, usually main.js and the following lines
import OhVueIcon from "oh-vue-icons";
import { FaFlag, RiZhihuFill, MdFacebook, OiOctoface, BiTwitter, FaWordpress } from "oh-vue-icons/icons";
OhVueIcon.add(FaFlag, RiZhihuFill, MdFacebook, OiOctoface, BiTwitter, FaWordpress);
Vue.component("v-icon", OhVueIcon);
In the he 3rd line we imported the individual Icon from oh-vue-icons. Visit the icon page and copy the name of the icon by clicking and copy. Then add it to the main.js as above.
v-icon
Using the v-icon we can include icons in the template. The component has few important props like name, scale etc, where scale is used to adjust the size of the icon. For complete list of props and features refer the GitHub documentation.
<v-icon name="fa-wordpress" scale="1.5"/>
Icon set/name we imported has two part (all of them has to be in lower case while passing to name prop). The first two letters (fa) should be appear before the hyphen(-) and the rest come after.
Top comments (0)