The vue-icomoon from gizemnkorkmaz

vue-icomoon's Introduction

📦 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",
];