Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@beisen/nade-style

Package Overview
Dependencies
Maintainers
1
Versions
63
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@beisen/nade-style

NaDeStyle

  • 0.1.61
  • npm
  • Socket score

Version published
Weekly downloads
12
increased by20%
Maintainers
1
Weekly downloads
 
Created
Source

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为所有图标(四个库的总和);

Keywords

FAQs

Package last updated on 22 Aug 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc