Backupppert/boxicons
1
0
Fork 0
mirror of https://github.com/atisawd/boxicons.git synced 2024-11-13 19:04:52 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions
boxicons/README.md

164 lines
7.1 KiB
Markdown
Raw Permalink Normal View History

2.0.8
2021-07-19 15:52:12 +02:00
# boxicons
Added financial contributors to the README
2020-02-11 03:55:48 +01:00
[![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)
update
2018-06-17 13:18:42 +02:00
[![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)
1.7.0
2018-07-22 19:54:07 +02:00
1.7.1
2018-07-25 13:03:36 +02:00
update
2018-06-17 13:18:42 +02:00
_High Quality web friendly icons_
2.0.8
2021-07-19 15:52:12 +02:00
'Boxicons' is a carefully designed open source iconset with 1500+ icons. It's crafted to look enrich your website/app experience.
1.0.6
2018-06-26 10:49:48 +02:00
2.1.1
2021-12-03 23:58:48 +01:00
_Announcing Boxicons v2.1.1!_
1.7.0
2018-07-22 19:54:07 +02:00
2.0.9
2021-07-24 18:16:28 +02:00
- Fixed the errors with a few svgs, added viewbox
2.1.1
2021-12-03 23:58:48 +01:00
- Added 30 new icons
1.0.6
2018-06-26 10:49:48 +02:00
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
docs update
2018-07-07 18:01:48 +02:00
import 'boxicons';
import npm
2018-06-23 11:53:43 +02:00
```
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.5.2 added web component
2018-07-07 05:21:13 +02:00
href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
update
2018-06-17 13:18:42 +02:00
<!-- or -->
<link rel="stylesheet"
1.5.2 added web component
2018-07-07 05:21:13 +02:00
href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
update
2018-06-17 13:18:42 +02:00
</head>
```
1.5.0
2018-07-03 08:48:00 +02:00
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:
update
2018-06-17 13:18:42 +02:00
```html
<i class="bx bx-hot"></i>
1.5.0
2018-07-03 08:48:00 +02:00
<i class="bx bxs-hot"></i>
<i class="bx bxl-facebook-square"></i>
update
2018-06-17 13:18:42 +02:00
```
1.5.2 added web component
2018-07-07 05:21:13 +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
2.0.9
2021-07-24 18:16:28 +02:00
<script src="https://unpkg.com/boxicons@2.0.9/dist/boxicons.js"></script>
1.5.2 added web component
2018-07-07 05:21:13 +02:00
```
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>
```
1.6.0
2018-07-14 05:16:04 +02:00
To use solid icons or logos add attribute `type` as solid or logo before the name
1.5.2 added web component
2018-07-07 05:21:13 +02:00
```html
1.6.0
2018-07-14 05:16:04 +02:00
<box-icon type="solid" name="hot"></box-icon>
<box-icon type="logo" name="facebook-square"></box-icon>
1.5.2 added web component
2018-07-07 05:21:13 +02:00
```
The `<box-icon>` custom element supports the following attributes:
```html
<box-icon
1.6.0
2018-07-14 05:16:04 +02:00
type = "regular|solid|logo"
1.5.2 added web component
2018-07-07 05:21:13 +02:00
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>
```
1.6.0
2018-07-14 05:16:04 +02:00
- `type`: Should always be first and be one of the following values: `regular`,`solid`, `logo`
1.5.2 added web component
2018-07-07 05:21:13 +02:00
- `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:
Update README.md
2018-11-20 11:29:52 +01:00
- One of the following shortcuts: `xs`, `sm`, `md`, `lg`
1.5.2 added web component
2018-07-07 05:21:13 +02:00
- 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).
update
2018-06-17 13:18:42 +02:00
[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
Added financial contributors to the README
2020-02-11 03:55:48 +01:00
## Contributors
### Code Contributors
This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
<a href="https://github.com/atisawd/boxicons/graphs/contributors"><img src="https://opencollective.com/boxicons/contributors.svg?width=890&button=false" /></a>
### Financial Contributors
Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/boxicons/contribute)]
#### Individuals
<a href="https://opencollective.com/boxicons"><img src="https://opencollective.com/boxicons/individuals.svg?width=890"></a>
#### 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)]
<a href="https://opencollective.com/boxicons/organization/0/website"><img src="https://opencollective.com/boxicons/organization/0/avatar.svg"></a>
<a href="https://opencollective.com/boxicons/organization/1/website"><img src="https://opencollective.com/boxicons/organization/1/avatar.svg"></a>
<a href="https://opencollective.com/boxicons/organization/2/website"><img src="https://opencollective.com/boxicons/organization/2/avatar.svg"></a>
<a href="https://opencollective.com/boxicons/organization/3/website"><img src="https://opencollective.com/boxicons/organization/3/avatar.svg"></a>
<a href="https://opencollective.com/boxicons/organization/4/website"><img src="https://opencollective.com/boxicons/organization/4/avatar.svg"></a>
<a href="https://opencollective.com/boxicons/organization/5/website"><img src="https://opencollective.com/boxicons/organization/5/avatar.svg"></a>
<a href="https://opencollective.com/boxicons/organization/6/website"><img src="https://opencollective.com/boxicons/organization/6/avatar.svg"></a>
<a href="https://opencollective.com/boxicons/organization/7/website"><img src="https://opencollective.com/boxicons/organization/7/avatar.svg"></a>
<a href="https://opencollective.com/boxicons/organization/8/website"><img src="https://opencollective.com/boxicons/organization/8/avatar.svg"></a>
<a href="https://opencollective.com/boxicons/organization/9/website"><img src="https://opencollective.com/boxicons/organization/9/avatar.svg"></a>
update
2018-06-17 13:18:42 +02:00
## License
Update README.md
2018-11-20 13:07:12 +01:00
- 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.
Update README.md
2018-11-20 13:04:03 +01:00
[You can read more about 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)
Reference in a new issue Copy permalink