@beisen-cmps/nade-style

    1.0.2 • Public • Published

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

    Install

    npm i @beisen-cmps/nade-style

    DownloadsWeekly Downloads

    25

    Version

    1.0.2

    License

    ISC

    Unpacked Size

    6.47 MB

    Total Files

    528

    Last publish

    Collaborators

    • beisencorp