# boxicons [![Financial Contributors on Open Collective](https://opencollective.com/boxicons/all/badge.svg?label=financial+contributors)](https://opencollective.com/boxicons) [![GitHub issues](https://img.shields.io/github/issues/atisawd/boxicons.svg)](https://github.com/atisawd/boxicons/issues) [![Twitter](https://img.shields.io/twitter/url/https/github.com/atisawd/boxicons.svg?style=social)](https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Fgithub.com%2Fatisawd%2Fboxicons) [![Donate](https://img.shields.io/badge/donate-paypal-blue.svg?style=flat-square)](https://paypal.me/atisawd) _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: ```bash $ npm install boxicons --save ``` import the module ```javscript import 'boxicons'; ``` ## Usage ### Using via CSS 1. Include the stylesheet on your document's `` ```html ``` Instead of installing you may use the remote version ```html ``` 2. 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: ```html ``` ### 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: ```html ``` To use an icon, add the `` element to the location where the icon should be displayed: ```html ``` To use solid icons or logos add attribute `type` as solid or logo before the name ```html ``` The `` custom element supports the following attributes: ```html ``` - `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/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). [Check out all the icons here!](https://boxicons.com) ## Contributors ### Code Contributors This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].

### Financial Contributors Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/boxicons/contribute)] #### Individuals

#### Organizations Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/boxicons/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!](https://boxicons.com/get-started#license) ## 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](https://github.com/atisawd/boxicons/blob/master/README.md)

パッケージ	ダウンロード数	Stars	サイズ	Issues	公開日時	ライセンス

boxicons	44,560	3,146	3.75 MB	862	-	(CC-BY-4.0 OR OFL-1.1 OR MIT)