vue-icomoon

📦 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