Svg icons for VueJS

v-svg-icons

Svg icons for VueJS.

These instructions will get you a copy of the component up and running on your local machine.

You can install v-svg-icons component by npm

npm i v-svg-icons

After download, v-svg-icons will be ready to use in your vue.js applications

import icons from "v-svg-icons";

Vue.component("icon", icons);

After this step, it can be used by all registered components in your project by tag name.

To use icons, you must specify the name of the icon you want with the name parameter inside the tag.

<icon name="arrow-up">

You can specify the width and height values as in the example.

The default width and height values for all icons are 50px.

<icon name="arrow-up" width="80px" height="80px" />

<icon name="arrow-up" color="black" />
<icon name="arrow-up" color="#000" />
<icon name="arrow-up" color="rgba(0, 0, 0, .2)" />

You can use the name of the icon as the class name for additional styling operations.

<icon name="arrow-up" />

<style>
    .arrow-up{
        fill: green;
        background: red;
        width: 150px;
        height: 150px;
    }
</style>

You can apply all the changes that can be made for svg as in the example.

Mehmet Sağır