vue-mono-icons

    1.3.0 • Public • Published

    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

    Thank you for reading 😁

    Dependencies (0)

      Dev Dependencies (4)

      Install

      npm i vue-mono-icons

      DownloadsWeekly Downloads

      35

      Version

      1.3.0

      License

      MIT

      Unpacked Size

      659 kB

      Total Files

      164

      Last publish

      Collaborators

      • jordienric