Backupppert/boxicons
1
0
Fork 0
mirror of https://github.com/atisawd/boxicons.git synced 2024-12-22 20:32:38 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions
High Quality web friendly icons
117 commits 13 branches 0 tags 23 MiB
CSS 73.2%
HTML 16.7%
JavaScript 10.1%
Find a file
IYASSDEV 6be879776d
Create LICENSE
2018-11-20 13:12:05 +01:00
dist 1.8.1 2018-11-20 15:59:33 +05:30
src 1.5.5 2018-07-07 19:50:52 +05:30
static 1.8.1 2018-11-20 15:59:33 +05:30
.babelrc Initial commit 2018-06-15 13:20:17 +05:30
.eslintrc.json Initial commit 2018-06-15 13:20:17 +05:30
.gitignore Initial commit 2018-06-15 13:20:17 +05:30
.nojekyll Initial commit 2018-06-15 13:20:17 +05:30
.svgo.yml Optimize SVG files 2018-06-23 13:57:20 +02:00
404.html 1.1.0 2018-06-30 01:30:13 +05:30
CNAME cname-change 2018-06-15 14:01:15 +05:30
dev.box-icon-element.html 1.5.3 2018-07-07 10:05:49 +05:30
index.html Update index.html 2018-11-20 16:00:57 +05:30
LICENSE Create LICENSE 2018-11-20 13:12:05 +01:00
package.json 1.8.1 2018-11-20 15:59:33 +05:30
README.md Update README.md 2018-11-20 13:04:03 +01:00
webpack.config.js 1.5.6 2018-07-07 23:01:17 +05:30

README.md

BoxIcons

GitHub issues Twitter Donate

High Quality web friendly icons

'Boxicons' is a carefully designed open source iconset with 700+ icons. It's crafted to look enrich your website/app experience.

Announcing Boxicons v1.8.1!

Total of 820 icons in regular, solid styles.

  • Woff2 font added
  • new icons added
  • Corrections to comply with the Material system icon rules

Installation

To install via npm, simply do the following:

$ npm install boxicons --save

import the module

import 'boxicons';

Usage

Using via CSS

  1. Include the stylesheet on your document's <head>
<head>
  <link rel="stylesheet" href="boxicons.min.css">
</head>

Instead of installing you may use the remote version

<head>
  <link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
  <!-- or -->
  <link rel="stylesheet"
  href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
</head>
  1. 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:
<i class="bx bx-hot"></i>
<i class="bx bxs-hot"></i>
<i class="bx bxl-facebook-square"></i>

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:

<script src="https://unpkg.com/boxicons@latest/dist/boxicons.js"></script>

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

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

To use solid icons or logos add attribute type as solid or logo before the name

<box-icon type="solid" name="hot"></box-icon>
<box-icon type="logo" name="facebook-square"></box-icon>

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

<box-icon
    type = "regular|solid|logo"
    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>

  • 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!

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!

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