📦 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

• react-icomoon
• preact-icomoon
• svelte-icomoon