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

boxicons

v2.1.4

Published

High Quality Web Icons

Downloads

794,588

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

bluelion4bluelion4

Keywords

Readme

boxicons

Financial Contributors on Open Collective GitHub issues Twitter Donate

High Quality web friendly icons

'Boxicons' is a carefully designed open source iconset with 1500+ icons. It's crafted to look enrich your website/app experience.

Announcing Boxicons v2.1.3!

  • Fixed the errors with a few svgs, added viewbox
  • Added 34 new icons

Installation

To install via npm, simply do the following:

$ npm install boxicons --save

import the module

import 'boxicons';

Usage

Using via CSS

  1. Include the stylesheet on your document's <head>
<head>
  <link rel="stylesheet" href="boxicons.min.css">
</head>

Instead of installing you may use the remote version

<head>
  <link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
  <!-- or -->
  <link rel="stylesheet"
  href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
</head>
  1. To use an icon on your page, add a class 'bx' and seperate class with the icons name with a prefix 'bx-' for regular icons , 'bxs-' for solid icons and 'bxl-' for logos:
<i class="bx bx-hot"></i>
<i class="bx bxs-hot"></i>
<i class="bx bxl-facebook-square"></i>

Using via Web Component

Boxicons includes a Custom Element that makes using icons easy and efficient. To use it, add the box-icon-element.js file to the page:

<script src="https://unpkg.com/[email protected]/dist/boxicons.js"></script>

To use an icon, add the <box-icon> element to the location where the icon should be displayed:

<box-icon name="hot"></box-icon>

To use solid icons or logos add attribute type as solid or logo before the name

<box-icon type="solid" name="hot"></box-icon>
<box-icon type="logo" name="facebook-square"></box-icon>

The <box-icon> custom element supports the following attributes:

<box-icon
    type = "regular|solid|logo"
    name="adjust|alarms|etc...."
    color="blue|red|etc..."
    size="xs|sm|md|lg|cssSize"
    rotate="90|180|270"
    flip="horizontal|vertical"
    border="square|circle"
    animation="spin|tada|etc..."
    pull = "left|right"
></box-icon>

  • type: Should always be first and be one of the following values: regular,solid, logo

  • name : (REQUIRED) the name of the icon to be displayed

  • color: A color for the icon.

  • size: The size for the icon. It supports one of two types of values:

    • One of the following shortcuts: xs, sm, md, lg
    • A css unit size (ex. 60px)

  • rotate: one of the following values: 90, 180, 270

  • flip: one of the following values: horizontal, vertical

  • border: one of the following values: square, circle

  • animation: One of the following values: spin, tada, flashing, burst, fade-left, fade-right, spin-hover, tada-hover, flashing-hover, burst-hover, fade-left-hover, fade-right-hover

  • pull: one of the following values: left,right The Custom Element class (BoxIconElement) exposes the following static members:

  • tagName: property that holds the HTML element tag name. Default: box-icon

  • defined([tagName]): Defines the Element in the custom element registry using either the tagName provided on input or the (default) the one defined on the Class.

  • cdnUrl: property that holds the URL that will be used to retrieve the images. URL should point to the folder that contains the images. example: //unpkg.com/[email protected]/svg (no trailing forward slash)

  • getIconSvg(iconName): method used to retrieve the SVG image. Should return a Promise that resolves with the SVG source (String).

Check out all the icons here!

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

License

  • The icons (.svg) files are free to download and are licensed under CC 4.0 By downloading it is assumed that you agree with the terms mentioned in CC 4.0.
  • The fonts files are licensed under SIL OFL 1.1.
  • Attribution is not required but is appreciated.
  • Other files which are not fonts or icons are licensed under the MIT License.

You can read more about the license here!

Contributing

Pull requests are the way to go here. I apologise in advance for the slow action on pull requests and issues.

Caught a mistake or want to contribute to the documentation? Edit this page on Github