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

1. go to mdi website;
2. select and click to the icon;
3. find the Advanced Export label and click on the code icon;
4. elect View SVG;
5. select and copy path from the d="...";
6. create a variable in the icon file;

for Font Awesome

1. go to fontawesome;
2. select and click to the icon;
3. find and click the code icon to copy the SVG;
4. paste the code in any text editor and cut the content from d="...";
5. 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

1. Create plugin vue-component-icon.js

// ./plugins/vue-component-icon.js

import Vue from 'vue'
import cIcon from 'vue-component-icon'

Vue.use(cIcon)

2. Add plugin

// nuxt.config.js

plugins: [
  ...
  { src: '~/plugins/vue-component-icon' },
  ...
],

3. 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.