/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 License

📦 Zero Dependencies

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

Demo

Install

npm install vue-icomoon

Usage

You can use the icons you selected on IcoMoon by downloading the selection.json file.

You can try svgps.app to generate 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