npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

easy-icon

v1.1.0

Published

A beautiful, easy-to-use web font icon library

Downloads

83

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

theajacktheajack

Keywords

font icon libweb fontweb iconFont-Awesome

Readme

🚀 高颜值、简单易用的web字体图标库

在线使用 | Github | Gitee | English

[TOC]

0. 快速开始

Easy-ICON 是一款高颜值、简单易用的web字体图标库，只需引入一个css文件（或一个npm包），您就可以简单地使用1000多个漂亮的图标

以下是css文件引入的一个简单例子

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-all.css">
</head>
<body>
    <i class="ei-heart ei-xs" style="color: red;"></i>
    <i class="ei-spinner-indicator ei-spin"></i> <!--一个旋转的loading-->
    <i class="ea-star-half-empty"></i>
    <i class="et-like ei-l"></i>
    <i class="ef-html5 ei-xl"></i>
    <i class="el-goods ei-4x"></i>
</body>
</html>

效果图：

😃 在线体验1583个图标

1. 介绍

Easy-ICON 是一个简单易用的icon字体库

Easy-ICON 使用 Font-Awesome 等多个图标库, 对原作者做出的贡献表示感谢!

特性：

  1. 使用非常简单
  2. 1583个常用的字体图标，来自多个字体图库
  3. 自定义任意css样式，缩放不模糊
  4. 按模块部分使用

2.安装使用

2.1 使用css文件引用:(推荐下载到本地然后引用本地文件)

easy-icon 共分为了五个模块，可以独立单独引用

2.1.1 在线模式

在线模式依赖网络上的字体库，而离线模式将字体库转换成base64，从而可以离线使用

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-a.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-f.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-t.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-l.css">

或者使用一个集合的版本

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-all.css">
2.1.2 离线模式
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon.o.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-a.o.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-f.o.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-t.o.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-l.o.css">

或者使用一个集合的版本

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-all.o.css">

2.2 或者使用npm安装:

npm i easy-icon;

您只需要引用一次即可:

与css文件引用一样，可以模块独立引用，无需使用全部

2.2.1 在线模式
import 'easy-icon';
import 'easy-icon/easy-icon-a.js';
import 'easy-icon/easy-icon-f.js';
import 'easy-icon/easy-icon-t.js';
import 'easy-icon/easy-icon-l.js';

也可以直接引入 css 文件 (需搭配css-loader等工具使用)

import 'easy-icon/css/easy-icon.css';
import 'easy-icon/css/easy-icon-a.css';
import 'easy-icon/css/easy-icon-f.css';
import 'easy-icon/css/easy-icon-t.css';
import 'easy-icon/css/easy-icon-l.css';

或者使用集合版本

import 'easy-icon/easy-icon-all.js';

引用css文件

import 'easy-icon/css/easy-icon-all.css';
2.2.2 离线模式
import 'easy-icon/offline';
import 'easy-icon/offline/easy-icon-a.js';
import 'easy-icon/offline/easy-icon-f.js';
import 'easy-icon/offline/easy-icon-t.js';
import 'easy-icon/offline/easy-icon-l.js';

也可以直接引入 css 文件 (需搭配css-loader等工具使用)

import 'easy-icon/offline/css/easy-icon.css';
import 'easy-icon/offline/css/easy-icon-a.css';
import 'easy-icon/offline/css/easy-icon-f.css';
import 'easy-icon/offline/css/easy-icon-t.css';
import 'easy-icon/offline/css/easy-icon-l.css';

或者使用集合版本

import 'easy-icon/offline/easy-icon-all.js';

引用css文件

import 'easy-icon/offline/css/easy-icon-all.css';

2.3 使用

Easy ICON使用起来十分简单，您只需要在您想要使用的地方插入一个如下的标签即可:

<i class="ei-spmile"></i>

需要注意的是，五个模块对应的前缀不一样，分别为

  • easy-icon-a: ei-
  • easy-icon-a: ea-
  • easy-icon-f: ef-
  • easy-icon-t: et-
  • easy-icon-l: el-

查看可用的图标

3.其他

3.1 让图标旋转

您可以通过添加 ei-spin 类来使图标旋转:

<i class="ei-spinner-snake ei-spin"></i>

ei-spin 类对五个模块表现一致

3.2 选择尺寸

Easy ICON 内置了八种不同大小的尺寸，从小到大依次为::xs,s,l,lg,2x,3x,4x,5x

尺寸类对五个模块表现一致

<i class="ei-smile ei-s"></i>
<i class="ei-smile ei-xs"></i>

当然，您可以使用任何自定义css样式来覆盖默认的样式.

3.3 翻转

使用 ei-flip-horizontal 可以使图标绕竖直轴翻转180度

<i class="ei-thumbs-o-up ei-flip-horizontal"></i>

使用 ei-flip-vertical 可以使图标绕水平轴翻转180度

<i class="ei-thumbs-o-up ei-flip-vertical"></i>

3.4 旋转

使用 ei-rotate-90,ei-rotate-180,ei-rotate-270 分别可以使图标按顺时针方向旋转 90、180、270度

<i class="ei-smile ei-rotate-90"></i>
<i class="ei-smile ei-rotate-180"></i>
<i class="ei-smile ei-rotate-270"></i>