vue-component-icon v1.1.2

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";
...

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>

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

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.