Vue Component Icon
Create and use your own icons, or use only your favorites in your vue.js project.
Install
npm i --save-dev vue-component-icon
# or
yarn add --dev vue-component-icon
How to use?
Import and connection
Vue.js v2
// main
import Vue from "vue";
import App from "./App.vue";
import cIcon from "vue-component-icon";
new Vue({
cIcon,
render: (h) => h(App),
}).$mount("#app");
Vue.js v3
// main
import { createApp } from "vue";
import App from "./App.vue";
import cIcon from "vue-component-icon";
const app = createApp(App);
app.use(cIcon);
app.mount("#app");
Create a list of icons in your directory
// path/list-icons
export const mdiCheck = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z";
export const mdiClose = "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z";
...
export const yourIcon = "path";
...
How to add icons from mdi, fontawesome and more?
for mdi
- go to mdi website;
- select and click to the icon;
- find the
Advanced Export
label and click on thecode
icon; - elect
View SVG
; - select and copy path from the
d="..."
; - create a variable in the icon file;
for Font Awesome
- go to fontawesome;
- select and click to the icon;
- find and click the
code
icon to copy the SVG; - paste the code in any text editor and cut the content from
d="..."
; - create a variable in the icon file;
Import the list locally in components or globally
<!-- component.vue -->
<script>
import { mdiCheck, mdiClose, yourIcon } from "./list-icons";
export default {
data: () => ({
mdiCheck,
mdiClose,
yourIcon,
}),
};
</script>
Usage in template
<template>
<div>
<c-icon x-large color="yellowgreen" :path="yourIcon" />
<c-icon size="32" color="red" :path="mdiClose" />
</div>
</template>
Use with @mdi/js and Nuxt
- Create plugin
vue-component-icon.js
// ./plugins/vue-component-icon.js
import Vue from 'vue'
import cIcon from 'vue-component-icon'
Vue.use(cIcon)
- Add plugin
// nuxt.config.js
plugins: [
...
{ src: '~/plugins/vue-component-icon' },
...
],
- Use in vue component
<script>
import { mdiBriefcaseEyeOutline } from '@mdi/js'
export default {
data() {
return {
mdiBriefcaseEyeOutline,
}
}
}
</script>
<template>
<c-icon :path="mdiBriefcaseEyeOutline" />
</template>
Props
Name | Type | Require | Default | Description |
---|---|---|---|---|
color | string |
optional | currentColor |
Applies specified color to the control. For example yellow or css color (#fff or rgba(255, 0, 0, 0.5) ) |
dark | boolean |
optional | false | Changed component color to white if color option is not set. |
dense | boolean |
optional | false | Makes icon smaller (20px) |
disabled | boolean |
optional | false | Disable the input |
large | boolean |
optional | false | Makes the component large (36px) |
left | boolean |
optional | false | Applies margin-right to the icon when placed to the left of another element or text |
path | string |
required |
'' |
Generic element to define a shape |
right | boolean |
optional | false | Applies margin-left to the icon when placed to the right of another element or text |
rotate |
number or string
|
optional | 0 |
from 0 to 360
|
size |
number or string
|
optional | 24 |
Specifies a custom font size for the icon |
small | boolean |
optional | false | Makes the component small (16px) |
title | string |
optional | '' |
Adds a header to the svg |
x-large | boolean |
optional | false | Makes the component extra large (40px) |
x-small | boolean |
optional | false | Makes the component extra small (12px) |
License
Vue Component Icon is licensed under the MIT license. You are free to use, modify and distribute this software, as long as the copyright header is left intact.