UNPKG

@tethys/icons

Version:
113 lines (78 loc) 2.63 kB
<h1 align="center">Tethys Icons</h1> <div align="center"> An enterprise-class UI design language Icons. </div> ## 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 ```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 git@github.com: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 ```