mirror of
https://github.com/atisawd/boxicons.git
synced 2024-11-13 19:04:52 +01:00
Bug fixes to css + Docs + output custom element bundle to dist/ folder
This commit is contained in:
Paul T
parent
67cf6bd308
commit
f403027ae3
4 changed files with 55 additions and 2 deletions
42
README.md
42
README.md
|
|
@ -30,6 +30,8 @@ import 'boxicons/css/boxicons.css';
|
||||||
```
|
```
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
|
### Using via CSS
|
||||||
|
|
||||||
1. Include the stylesheet on your document's `<head>`
|
1. Include the stylesheet on your document's `<head>`
|
||||||
|
|
||||||
```html
|
```html
|
||||||
|
|
@ -60,6 +62,46 @@ Instead of installing you may use the remote version
|
||||||
[Check out all the icons here!](https://boxicons.com)
|
[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
|
## License
|
||||||
|
|
||||||
[You can read the license here!](https://boxicons.com/get-started#license)
|
[You can read the license here!](https://boxicons.com/get-started#license)
|
||||||
|
|
|
||||||
2
dist/box-icon-element.js
vendored
Normal file
2
dist/box-icon-element.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -16,6 +16,10 @@ TEMPLATE.innerHTML = `
|
||||||
<style>
|
<style>
|
||||||
:host {
|
:host {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
font-size: initial;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
:host #icon {
|
||||||
width: 1em;
|
width: 1em;
|
||||||
height: 1em;
|
height: 1em;
|
||||||
}
|
}
|
||||||
|
|
@ -35,12 +39,12 @@ TEMPLATE.innerHTML = `
|
||||||
width: 3.0rem;
|
width: 3.0rem;
|
||||||
height: 3.0rem;
|
height: 3.0rem;
|
||||||
}
|
}
|
||||||
:host([shape=square]) {
|
:host([shape=square]) #icon {
|
||||||
padding: .25em;
|
padding: .25em;
|
||||||
border: .07em solid rgba(0,0,0,.1);
|
border: .07em solid rgba(0,0,0,.1);
|
||||||
border-radius: .25em;
|
border-radius: .25em;
|
||||||
}
|
}
|
||||||
:host([shape=circle]) {
|
:host([shape=circle]) #icon {
|
||||||
padding: .25em;
|
padding: .25em;
|
||||||
border: .07em solid rgba(0,0,0,.1);
|
border: .07em solid rgba(0,0,0,.1);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
|
@ -50,6 +54,9 @@ svg {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
#icon {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
${animationsCss}
|
${animationsCss}
|
||||||
${transformationsCss}
|
${transformationsCss}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
const path = require('path');
|
||||||
const webpack = require('webpack');
|
const webpack = require('webpack');
|
||||||
const WrapperPlugin = require('wrapper-webpack-plugin');
|
const WrapperPlugin = require('wrapper-webpack-plugin');
|
||||||
const packageJson = require('./package.json');
|
const packageJson = require('./package.json');
|
||||||
|
|
@ -5,6 +6,7 @@ const packageJson = require('./package.json');
|
||||||
module.exports = {
|
module.exports = {
|
||||||
entry: `${__dirname}/src/index.js`,
|
entry: `${__dirname}/src/index.js`,
|
||||||
output: {
|
output: {
|
||||||
|
path: path.resolve(__dirname, 'dist'),
|
||||||
library: 'BoxIconElement',
|
library: 'BoxIconElement',
|
||||||
libraryTarget: 'umd',
|
libraryTarget: 'umd',
|
||||||
filename: 'box-icon-element.js',
|
filename: 'box-icon-element.js',
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue