|
|
||
|---|---|---|
| dist | ||
| src | ||
| static | ||
| .babelrc | ||
| .eslintrc.json | ||
| .gitignore | ||
| .nojekyll | ||
| .svgo.yml | ||
| 404.html | ||
| CNAME | ||
| dev.box-icon-element.html | ||
| index.html | ||
| package.json | ||
| README.md | ||
| webpack.config.js | ||
BoxIcons
High Quality web friendly icons
'Boxicons' is a carefully designed open source iconset with 700+ icons. It's crafted to look enrich your website/app experience.
Announcing Boxicons v1.8.1!
Total of 820 icons in regular, solid styles.
- Woff2 font added
- new icons added
- Corrections to comply with the Material system icon rules
Installation
To install via npm, simply do the following:
$ npm install boxicons --save
import the module
import 'boxicons';
Usage
Using via CSS
- 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>
- 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/boxicons@latest/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 followign shortcuts:
xs,sm,md,lg - A css unit size (ex.
60px)
- One of the followign shortcuts:
-
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,rightThe 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/boxicons@1.5.2/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).
License
You can read 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