Package Exports

vue-mono-icons

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-mono-icons) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vue Mono Icons

Library of Vue Components based on the open source Mono Icons.

Official website: https://icons.mono.company/

Find all the icons & easily copy the name or import string here: https://vue-mono-icons.netlify.app/

Thanks to Mono for designing them and making them Open Source.

Installation

npm i --save-dev vue-mono-icons

Usage

<template>
  <div class="home">
    <h1>Vue Mono icons</h1>
    <TagIcon color="indigo" />
    <DeleteIcon size="18" color="red" />
  </div>
</template>

<script>
import { TagIcon, DeleteIcon } from "vue-mono-icons";

export default {
  name: "Home",
  components: {
    TagIcon,
    DeleteIcon,
  },
};
</script>

Global styles

If you want to set the styles once and forget for all icons write this CSS somewhere in your global scope

<style lang="css">
.mono-icon svg {
  fill: indigo;
  width: 44px;
  height: 44px;
}
</style>

⚠ Don't set this css as "scoped" or it will not work.

You can also add it to a separate file and import it.

Icon names

You can find the full list here
https://icons.mono.company/

All icon names are PascalCase with "Icon" at the end.

delete = DeleteIcon chevron-double-right = ChevronDoubleRightIcon

You can also import the whole icon list from vue-mono-icons/src/iconList.js

import { iconList } from "vue-mono-icons/src/iconList";

Acknowledgements

Mono Icons
This library is based on svelte-mono-icons and vue-feather-icons

vue-mono-icons