npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-icons-plus

v0.1.8

Published

SVG vue icons of popular icon packs using ES6 imports

Downloads

743

Readme

Vue Icons Plus

npm

Open in Gitpod

Vue icons plus icons total 50000+, support Vue 3/Vue 2.7+, allowing you to easily import and use them directly in Vue projects.

Installation (for standard modern project)

yarn add vue-icons-plus
# or
npm install vue-icons-plus --save

Example usage for Vue 3

<script>
  import { FaBeer } from "vue-icons-plus/fa";
</script>

<template>
  <div>
    <FaBeer />
  </div>
</template>

Example usage for Vue ^2.7

<script>
  import { FaBeer } from "vue-icons-plus/fa";
  export default {
    components: {
      FaBeer
    }
  }
</script>

<template>
  <div>
    <FaBeer />
  </div>
</template>

Example usage for Uniapp

<template>
  <view>
    <BiSearch />
  </view>
</template>

<script lang="uts">
  import { BiSearch } from 'vue-icons-plus/bi';
  export default {
    components: {
      BiSearch
    },
  }
</script>

View the documentation for further usage examples and how to use icons from other packages. NOTE: each Icon package has it's own subfolder under vue-icons-plus you import from.

For example, to use an icon from Material Design, your import would be: import { ICON_NAME } from 'vue-icons-plus/md';

Installation (for Webpack 3, etc)

Due to npm restrictions, only supports: aibibscgcidifafa6fcfigigogrhihi2imiolia.

If your project grows in size, this option is available. This method has the trade-off that it takes a long time to install the package.

yarn add @vue-icons-plus/all-files
# or
npm install @vue-icons-plus/all-files --save

Example usage for Vue 3

<script>
  import { FaBeer } from "@vue-icons-plus/all-files/fa/FaBeer";
</script>

<template>
  <div>
    <FaBeer />
  </div>
</template>

Example usage for Vue ^2.7

<script>
  import { FaBeer } from "@vue-icons-plus/all-files/fa/FaBeer";
  export defautls {
    components: {
      FaBeer
    }
  }
</script>

<template>
  <div>
    <FaBeer />
  </div>
</template>

Icons

| Icon Library | License | Version | Count | | ------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----: | | Circum Icons | MPL-2.0 license | v2.0.2-22-gcec1364 | 288 | | Font Awesome 5 | CC BY 4.0 License | 5.15.4-3-gafecf2a | 1612 | | Font Awesome 6 | CC BY 4.0 License | 6.5.2 | 2045 | | Ionicons 4 | MIT | 7.2.2 | 1338 | | Ionicons 5 | MIT | 5.5.4 | 1332 | | Material Design icons | Apache License Version 2.0 | 4.0.0-98-g9beae745bb | 4341 | | Typicons | CC BY-SA 3.0 | v2.1.2 | 336 | | Github Octicons icons | MIT | 19.8.0 | 273 | | Feather | MIT | 4.29.1 | 287 | | Lucide | ISC | 0.303.0 | 1368 | | Game Icons | CC BY 3.0 | 12920d6565588f0512542a3cb0cdfd36a497f910 | 4040 | | Weather Icons | SIL OFL 1.1 | 2.0.12-7-gbb80982 | 219 | | Devicons | MIT | 1.8.0 | 192 | | Ant Design Icons | MIT | @ant-design/[email protected] | 831 | | Bootstrap Icons | MIT | v1.11.3-29-g92b6aee | 2716 | | Remix Icon | Apache License Version 2.0 | v4.2.0-4-ge252d6e | 2860 | | Flat Color Icons | MIT | v1.0.2-27-g8eccbbb | 329 | | Grommet-Icons | Apache License Version 2.0 | v4.12.1-3-gbfb6355 | 635 | | Heroicons | MIT | v1.0.6-3-gb6de579 | 460 | | Heroicons 2 | MIT | v2.1.3-1-g9a17872 | 888 | | Simple Icons | CC0 1.0 Universal | 4.14.0-2428-ga1df74e | 3124 | | Simple Line Icons | MIT | v2.5.5 | 189 | | IcoMoon Free | CC BY 4.0 License | d006795ede82361e1bac1ee76f215cf1dc51e4ca | 491 | | BoxIcons | MIT | 9ffa9136e8681886bb7bd2145cd4098717ce1c11 | 1634 | | css.gg | MIT | 2.1.1-1-gdeea4fa | 704 | | VS Code Icons | CC BY 4.0 | 0.0.35-41-g05f8886 | 461 | | Tabler Icons | MIT | v3.2.0-1-g4ec2a71 | 5237 | | Themify Icons | MIT | v0.1.2-2-g9600186 | 352 | | Radix Icons | MIT | @radix-ui/[email protected] | 318 | | Phosphor Icons | MIT | v2.0.8-9-gfe23e25 | 9072 | | Icons8 Line Awesome | MIT | v1.2.1-10-g78a1012 | 1544 | | IconPark | Apache License Version 2.0 | 1.0.0 | 2658 | | Element Plus Icons | MIT | 2.3.1 | 293 |

You can add more icons by submitting pull requests or creating issues.

Configuration

You can change the size, color, and so on of icons through props.

<script>
  import { FaBeer } from "vue-icons-plus/fa";
</script>

<template>
  <div>
    <FaBeer size="48" color="#333" />
  </div>
</template>

Props

| Key | Default | Notes | | ----------- | --------------------- | ---------------------------- | | color | undefined (inherit) | | | size | 24 | | | className | undefined | | | style | undefined | Can overwrite size and color |

Contributing

Development

yarn
cd packages/core
yarn fetch  # fetch icon sources
yarn build

Licence

MIT

  • Icons are taken from the other projects so please check each project licences accordingly.