/vue-icomoon

With vue-icomoon you can easily use the icons you have selected or created in icomoon.

Primary LanguageVueMIT LicenseMIT

Vue-Icomoon Logo

npm npm License

📦 Zero Dependencies

It makes it very simple to use SVG icons in your Vue3 projects.

Demo - Buy Me a Coffee

Install

npm install vue-icomoon

Usage

You can use svgps.app to access over 40,000 free icons and convert your own icons into selection.json.

Or you can use IcoMoon to generate the selection.json file.

Declare

Icon.vue

<template>
  <icomoon :iconSet="iconSet" v-bind="$props" />
</template>

<script>
  import { Icomoon } from "vue-icomoon";
  import iconSet from "./selection.json";

  export default {
    name: "Icon",
    components: { Icomoon },
    setup() {
      return {
        iconSet,
      };
    },
  };
</script>

Use

<template>
  <icon name="camera" :size="50" color="#5096ec" />
</template>

<script>
  import Icon from "./components/Icon/Icon.vue";

  export default {
    components: { Icon },
  };
</script>

Props List

Name Type Default Sample
iconSet Object undefined "selection.json file content"
name String undefined "home"
size Number,String undefined "1em", 10, "100px"
color String undefined "red", "#f00", "rgb(0,0,0)"
style Object {...} { color: '#ff0'}
title String undefined "Icon Title"
class String undefined "icomoon"
disableFill Boolean undefined true
removeInitialStyle Boolean undefined true

iconList

You can use the iconList method to see a complete list of icons you can use.

import { iconList } from "vue-icomoon";
import iconSet from "./selection.json";

iconList(iconSet);

// sample output
[
  "document",
  "camera",
  "genius",
  "chat",
  "heart1",
  "alarmclock",
  "star-full",
  "heart",
  "play3",
  "pause2",
  "bin1",
];

Related Links