boxicons/README.md

# 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 400+ icons. It's crafted to look enrich your website/app experience.


_Announcing Boxicons v1.1.0!_

14 more icons have been added to the list, and some pre built CSS classes to perform various functions like, rotate, animate and add border to the icons.
- A few bug fixes on the existing icons has been to make it pixel perfect.

You can check out the detailed documentation [here](https://boxicons.com/get-started)


## Installation

To install via npm, simply do the following:

```bash
$ npm install boxicons --save
```
import the module

```javscript
import 'boxicons/css/boxicons.css';
```
## Usage

### Using via CSS

1. Include the stylesheet on your document's `<head>`

```html
<head>
  <link rel="stylesheet" href="boxicons.min.css">
</head>
```

Instead of installing you may use the remote version 

```html
<head>
  <link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/boxicons@1.1.0/css/boxicons.min.css">
  <!-- or -->
  <link rel="stylesheet"
  href="https://unpkg.com/boxicons@1.1.0/css/boxicons.min.css">
</head>
```


2. To use an icon on your page, add a class 'bx' and seperate class with the icons name with a prefix 'bx-':

```html
<i class="bx bx-hot"></i>
```

[Check out all the icons here!](https://boxicons.com)


### 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
<script src="https://unpkg.com/boxicons@latest/dist/box-icon-element.js"></script>
```

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

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

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

```html
<box-icon
    name="adjust|alarms|etc...."
    color="blue|red|etc..."
    size="xs|sm|md|lg|cssSize"
    rotate="90|180|270"
    flip="horizontal|vertical"
    shape="square|circle"
    animation="spin|tada|etc..."
></box-icon>
```

-   `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`) 
-   `rotate`: one of the following values: `90`, `180`, `270`
-   `flip`:  one of the following values: `horizontal`, `vertical`
-   `shape`: 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`


## License

[You can read 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)
update 2018-06-17 13:18:42 +02:00			`# 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_`

1.0.6 2018-06-26 10:41:09 +02:00			`'Boxicons' is a carefully designed open source iconset with 400+ icons. It's crafted to look enrich your website/app experience.`
1.0.6 2018-06-26 10:49:48 +02:00

1.1.0 2018-06-29 22:00:13 +02:00			`_Announcing Boxicons v1.1.0!_`
1.0.6 2018-06-26 10:49:48 +02:00
1.1.0 2018-06-29 22:00:13 +02:00			`14 more icons have been added to the list, and some pre built CSS classes to perform various functions like, rotate, animate and add border to the icons.`
1.0.6 2018-06-26 10:49:48 +02:00			`- A few bug fixes on the existing icons has been to make it pixel perfect.`

			`You can check out the detailed documentation [here](https://boxicons.com/get-started)`

update 2018-06-17 13:18:42 +02:00
			`## Installation`

			`To install via npm, simply do the following:`

			```bash
			`$ npm install boxicons --save`
			```
import npm 2018-06-23 11:53:43 +02:00			`import the module`
update 2018-06-17 13:18:42 +02:00
import npm 2018-06-23 11:53:43 +02:00			```javscript
			`import 'boxicons/css/boxicons.css';`
			```
update 2018-06-17 13:18:42 +02:00			`## Usage`

Bug fixes to css + Docs + output custom element bundle to `dist/` folder 2018-06-30 22:10:38 +02:00			`### Using via CSS`

update 2018-06-17 13:18:42 +02:00			1. Include the stylesheet on your document's `<head>`

			```html
			`<head>`
readme 2018-06-17 13:31:12 +02:00			`<link rel="stylesheet" href="boxicons.min.css">`
update 2018-06-17 13:18:42 +02:00			`</head>`
			```

			`Instead of installing you may use the remote version`

			```html
			`<head>`
			`<link rel="stylesheet"`
1.1.0 2018-06-29 22:00:13 +02:00			`href="https://cdn.jsdelivr.net/npm/boxicons@1.1.0/css/boxicons.min.css">`
update 2018-06-17 13:18:42 +02:00			`<!-- or -->`
			`<link rel="stylesheet"`
1.1.0 2018-06-29 22:00:13 +02:00			`href="https://unpkg.com/boxicons@1.1.0/css/boxicons.min.css">`
update 2018-06-17 13:18:42 +02:00			`</head>`
			```


			`2. To use an icon on your page, add a class 'bx' and seperate class with the icons name with a prefix 'bx-':`

			```html
			`<i class="bx bx-hot"></i>`
			```

			`[Check out all the icons here!](https://boxicons.com)`


Bug fixes to css + Docs + output custom element bundle to `dist/` folder 2018-06-30 22:10:38 +02:00			`### 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
			`<script src="https://unpkg.com/boxicons@latest/dist/box-icon-element.js"></script>`
			```

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

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

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

			```html
			`<box-icon`
			`name="adjust\|alarms\|etc...."`
			`color="blue\|red\|etc..."`
			`size="xs\|sm\|md\|lg\|cssSize"`
			`rotate="90\|180\|270"`
			`flip="horizontal\|vertical"`
			`shape="square\|circle"`
			`animation="spin\|tada\|etc..."`
			`></box-icon>`
			```

			- `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`)
			- `rotate`: one of the following values: `90`, `180`, `270`
			- `flip`: one of the following values: `horizontal`, `vertical`
			- `shape`: 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`



update 2018-06-17 13:18:42 +02:00			`## License`

1.1.0 2018-06-29 22:00:13 +02:00			`[You can read the license here!](https://boxicons.com/get-started#license)`
update 2018-06-17 13:18:42 +02:00

			`## Contributing`

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

import npm 2018-06-23 11:53:43 +02:00			`Caught a mistake or want to contribute to the documentation? [Edit this page on Github](https://github.com/atisawd/boxicons/blob/master/README.md)`