- Notifications
You must be signed in to change notification settings - Fork0
IconJar format for BoxIcons, High Quality web friendly icons
nishad/boxicons-iconjar
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
High Quality web friendly icons
'Boxicons' is a carefully designed open source iconset with 600+ icons. It's crafted to look enrich your website/app experience.
Announcing Boxicons v1.9.2!
New icons added in regular, solid styles.
- Improvements on the current icons
- Corrections to comply with the Material system icon rules
To install via npm, simply do the following:
$ npm install boxicons --save
import the module
import 'boxicons';- Include the stylesheet on your document's
<head>
<head><linkrel="stylesheet"href="boxicons.min.css"></head>
Instead of installing you may use the remote version
<head><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css"><!-- or --><linkrel="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:
<iclass="bx bx-hot"></i><iclass="bx bxs-hot"></i><iclass="bx bxl-facebook-square"></i>
Boxicons includes a Custom Element that makes using icons easy and efficient. To use it, add thebox-icon-element.js file to the page:
<scriptsrc="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-iconname="hot"></box-icon>
To use solid icons or logos add attributetype as solid or logo before the name
<box-icontype="solid"name="hot"></box-icon><box-icontype="logo"name="facebook-square"></box-icon>
The<box-icon> custom element supports the following attributes:
<box-icontype = "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,logoname: (REQUIRED) the name of the icon to be displayedcolor: 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)
- One of the following shortcuts:
rotate: one of the following values:90,180,270flip: one of the following values:horizontal,verticalborder: one of the following values:square,circleanimation: 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-hoverpull: 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-icondefined([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).
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.1Attribution is not required but is appreciatedOther files which are not fonts or icons are licensed under the MIT License
You can read more about the license here!
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
About
IconJar format for BoxIcons, High Quality web friendly icons
Topics
Resources
Code of conduct
Security policy
Stars
Watchers
Forks
Packages0
Languages
- CSS66.0%
- HTML17.4%
- JavaScript16.6%