@beisen-cmps/nade-style

平台正在使用的字体图标库

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@beisen-cmps/nade-style
Minified + gzip package size for @beisen-cmps/nade-style in KB

Readme

NaDeStyle TalentUI系统级通用iconfont、svg

说明:系统图标,有些适合使用iconfont,但由于iconfont图标的特殊性,有些图标不适合使用iconfont(比如前景色和背景色不用的图标)

使用说明

1.在package.json中添加NaDeStyle

"@beisen/nade-style":"x.x.x" //查找你要使用的那个版本

2.安装npm组件包

npm install @beisen/nade-style --save-dev

3.在项目src/index.js中引入对应的scss文件

import '@beisen/nade-style/style.scss';

4.使用上面文件中指定的className,就可以在页面中显示iconfont图标了。

//例如:使用关闭按钮图标
<span className="sys-icon-close"></span>
        
        

注:浏览器打开根目录下index.html,可以预览到当前所有可用的icon图标。 部分图标不适合使用iconfont,在这种情况下,就可以引用NaDeStyle目录下的svg图标。 路径是:

//PC端
@beisen/nade-style/pc/sysicon/*.svg

//移动端
@beisen/nade-style/m/sysicon/*.svg

SVG使用

格式 `pc-sys-`
     `m-sys-`
<span class="pc-sys-guanbi-nomal-svg"></span>
<span class="m-sys-guanbi-nomal-svg"></span>

三种标准图标尺寸

  .sys-icon-size-xl{ font-size: 90px; }
  .sys-icon-size-l{ font-size: 32px; }
  .sys-icon-size-m{ font-size: 18px; }

tag信息

0.0.3 首批iconfont测试可用
0.0.4 添加dist/pc/sysicon目录下所有svg图片预览页面 icon-preview.html
0.0.5 添加“上传”、“全屏”、“表情”、“水平竖直切换”、“at”五个图标,同步更新iconfont
0.0.6 svg使用 通过class.修复bug
0.0.7 添加"add"图标,同步更新iconfont
0.0.8 添加"shiti"、“插件”、"app"、“caidan”、“sousuo” 五个图标,同步更新iconfont
0.0.10 添加7中标准背景色
0.0.11 添加"报表"icon

===================

原本所有的图标都在一个文件中,现在拆成了多个文件,分别是 base-style.scss: pc端基础组件相关的图标;icon-font对应的资源文件dist/base/fonts,里边的v1、v2为版本号。 component-style.scss: 业务中相关图标;icon-font对应的资源文件dist/component/fonts,里边的v1、v2为版本号。 italent-style.scss: italent相关图标;icon-font对应的资源文件dist/italent/fonts,里边的v1、v2为版本号。 mobile-style.scss: 移动端相关图标;icon-font对应的资源文件dist/mobile/fonts,里边的v1、v2为版本号。

all.scss为所有图标(四个库的总和);

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.