@tethys/icons
v1.4.75
Published
Tethys Icons
Downloads
532
Readme
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 [email protected]: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