Skip to content

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

License

Notifications You must be signed in to change notification settings

aykutkardas/vue-icomoon

Repository files navigation

Vue-Icomoon Logo

npm npm License

📦 Zero Dependencies

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

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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published