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

Bug fixes to css + Docs + output custom element bundle to dist/ folder

Browse source
This commit is contained in:
Paul T 2018-06-30 16:10:38 -04:00
parent 67cf6bd308
commit f403027ae3
4 changed files with 55 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
README.md
View file

@ -30,6 +30,8 @@ import 'boxicons/css/boxicons.css';
```
## Usage
### Using via CSS
1. Include the stylesheet on your document's `<head>`
```html
@ -60,6 +62,46 @@ Instead of installing you may use the remote version
[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)

2
dist/box-icon-element.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

11
src/box-icon-element.js
View file

@ -16,6 +16,10 @@ TEMPLATE.innerHTML = `
<style>
:host {
display: inline-block;
font-size: initial;
box-sizing: border-box;
}
:host #icon {
width: 1em;
height: 1em;
}
@ -35,12 +39,12 @@ TEMPLATE.innerHTML = `
width: 3.0rem;
height: 3.0rem;
}
:host([shape=square]) {
:host([shape=square]) #icon {
padding: .25em;
border: .07em solid rgba(0,0,0,.1);
border-radius: .25em;
}
:host([shape=circle]) {
:host([shape=circle]) #icon {
padding: .25em;
border: .07em solid rgba(0,0,0,.1);
border-radius: 50%;
@ -50,6 +54,9 @@ svg {
width: 100%;
height: 100%;
}
#icon {
box-sizing: border-box;
}
${animationsCss}
${transformationsCss}
</style>

2
webpack.config.js
View file

@ -1,3 +1,4 @@
const path = require('path');
const webpack = require('webpack');
const WrapperPlugin = require('wrapper-webpack-plugin');
const packageJson = require('./package.json');
@ -5,6 +6,7 @@ const packageJson = require('./package.json');
module.exports = {
entry: `${__dirname}/src/index.js`,
output: {
path: path.resolve(__dirname, 'dist'),
library: 'BoxIconElement',
libraryTarget: 'umd',
filename: 'box-icon-element.js',