Skip to content

Latest commit

 

History

History
140 lines (99 loc) · 3.46 KB

README.md

File metadata and controls

140 lines (99 loc) · 3.46 KB
Raw

iconoo

CircleCI GitHub stars GitHub license

iconoo是一个纯CSS的图标库，基于 icono 改造而成，增加了整体缩放功能（线宽不变）和webpack引入方式。

LIVE DEMO

iconoo

How to use

  • 下载 后直接link引入css文件，然后直接在标签中引入相应的class即可，例如：

<i class="iconoo-home"></i>

<div class="iconoo-home"></div>

<span class="iconoo-home"></span>

<whatever class="iconoo-home"></whatever>

  • 如果你使用webpack，那么可以直接使用安装npm包并引入iconoo库即可。
// 安装包
npm i iconoo

// 通过webpack引入
require('iconoo');

PS：

  • 设置font-size可等比缩放图标，同时保持线宽不变，默认值为20px（图标宽高为30px）

  • 设置zoom或者transform scale可等比缩放图标，线宽也同时变大

  • 如果需要改变线宽和其他全局属性，请下载源码，更改variables.sass内的相应变量

iconoo

iconoo is an icon pack that needs no external resources. iconoo is base on icono, and it is flexible, and you don't need to calculate any diamesion.

LIVE DEMO

How to use

  • Download the css file and link it to your page, then use these class in every tag you want, like these：

<i class="iconoo-home"></i>

<div class="iconoo-home"></div>

<span class="iconoo-home"></span>

<whatever class="iconoo-home"></whatever>

  • if you use webpack，then you can install iconoo via npm and import into your app like this:
npm i iconoo

require('iconoo');

PS: You can simple adjust the size of icons by setting its font-size, of course you can also scale icons by zoom or transform: scale.

Available classes

  • iconoo-pin
  • iconoo-locationArrow
  • iconoo-sync
  • iconoo-reset
  • iconoo-share
  • iconoo-search
  • iconoo-home
  • iconoo-bars
  • iconoo-ellipsis
  • iconoo-tiles
  • iconoo-list
  • iconoo-smile
  • iconoo-frown
  • iconoo-meh
  • iconoo-volume
  • iconoo-volumeLow
  • iconoo-volumeMedium
  • iconoo-volumeHigh
  • iconoo-volumeDecrease
  • iconoo-volumeIncrease
  • iconoo-volumeMute
  • iconoo-play
  • iconoo-pause
  • iconoo-stop
  • iconoo-rewind
  • iconoo-forward
  • iconoo-next
  • iconoo-previous
  • iconoo-rightArrow
  • iconoo-leftArrow
  • iconoo-upArrow
  • iconoo-downArrow
  • iconoo-check
  • iconoo-checkCircle
  • iconoo-cross
  • iconoo-crossCircle
  • iconoo-plus
  • iconoo-plusCircle
  • iconoo-caretRight
  • iconoo-caretLeft
  • iconoo-caretUp
  • iconoo-caretDown
  • iconoo-caretRightCircle
  • iconoo-caretLeftCircle
  • iconoo-caretUpCircle
  • iconoo-caretDownCircle
  • iconoo-caretRightSquare
  • iconoo-caretLeftSquare
  • iconoo-caretUpSquare
  • iconoo-caretDownSquare

Development & Contributing

Using npm install the dependencies:

$ npm install

Run Gulp

$ gulp