Tethys Icons

An enterprise-class UI design language Icons.

Design Specification

• 所有图标的大小为 16px，准确的来说是 viewBox 为 0 0 16 16
• 图标类型分三种：outline（普通）、fill（填充的）、two-tone（双色图标）
• 图标分普通、粗和细，普通的为 1.2px，粗的为 1.4px，细的为 1px

Naming Specification

• 填充图标以 -fill 结尾，双色图标以 -tt 结尾
• 加粗图标以 -bold 结尾，纤细图标以 -thin 结尾
• 图标以 -circle与-square 结尾分别表示是圆形和正方形
• 命名尽量以图标含义命名，比如 eye 表示一个眼睛，通常用于查看， clock-circle 表示一个圆形的时钟

Installation

npm i @tethys/icons -S

文件结构

.
├── defs        // 雪碧图 SVG defs 类型文件
├── fonts       // 字体图标文件
├── symbol      // 雪碧图 SVG symbol 类型文件
├── glyphs.json // 所有图标的名字和分类
├── README.md
└── package.json

Usage

Usage with Angular

Copy assets using angular.json

    "assets": [
        ...
        {
            "glob": "**/*",
            "input": "./node_modules/@tethys/icons",
            "output": "/assets/icons/"
        }
    ]

or using npm script to install and copy to assets directory

script:{
    ...
    "update-tethys-icons": "npm i @tethys/icons && cpx 'node_modules/@tethys/icons/**' 'src/assets/icons'"
}

Using thy-icon component in tethys library

ThyIconRegistry.addSvgIconSet(`src/assets/icons/defs/svg/sprite.defs.svg`)  // Load svg files

<thy-icon thyIconName="plus"></thy-icon>                                    // Use in template

Usage with IconFont

@import '@tethys/icons/fonts/tethys-icons.scss';    // Import tethys icons scss file

<i class="tethys-icon tethys-icon-plus"></i>        // 

Development

Clone

In order to build the @tethys/icons, ensure that you have Git and Node.js (>= 10.0.0) installed.

git clone [e-mail]:atinc/wt-design-icons.git  // Clone repository

cd wt-design-icons && npm install                   // Install node dependencies

Build

npm run build:icons     // Build icons

npm run build           // Build icons and demo

npm run start           // Start demo, open http://localhost:8887 to review

Release

npm run release         // Pull request release commit, add tag, changelog

Publish

npm run pub             // Publish to npm