How to use SVG icons in Vue with vue-uicon
vue-uicon is a Vue component that allows you to use SVG icons easily in your Vue application.
July 25, 2021
@openafg/vue-uicon
Use your SVG icons easily with vue-uicon
Installation
Terminal:
// With npm
npm install --save @openafg/vue-uicon
Usage
Add the following code in to your app.js file:
import Uicon from '@openafg/vue-uicon'
....
Vue.use(Uicon, {
/* options */
icons: {
iconName: 'SVG path'
}
})
<template>
<ui-icon name="iconName"></ui-icon>
</template>
Available props
<template>
<ui-icon name="iconName" color="#00f" size="40" viewBox="0 0 32 32"></ui-icon>
</template>
Options
Currently supported options
Vue.use(Uicon, {
defaultColor: '#aaa',
defaultSize: 20, // default is 20
viewBox: '0 0 60 60', // default is 0 0 32 32
strokeLinecap: 'round', // default is round
strokeLinejoin: 'round', // default is round,
strokeWidth: 1 // default is 0.5
icons: {
....
}
})