@3yourmind/yoco 中文文档教程
Yoco Icon
kotti 设计系统 的内部设计图标。
Installation
使用 yarn
yarn add @3yourmind/yoco
使用 npm
npm install --save @3yourmind/yoco
Add Yoco Icon to your project
使用模块捆绑器
@import '~@3yourmind/yoco'; // might need a sass importer like @3yourmind/sass-node-modules-importer
// enum of icons and the associated ligature / svg name
import { Yoco } from '@3yourmind/yoco'
console.log(Yoco.Icon.ANNOUNCE)
// 'announce'
使用 HTML
<link rel="stylesheet" href="./path/to/yoco/styles.css" />
Using yoco icons
Yoco 使用连字，这允许通过简单地使用带有 yoco 字体的名称来呈现图标字形。
<i class="yoco">cloud</i>
<!-- or, use .svg -->
<img src="./path/to/yoco/svg/cloud.svg" />
How to Build and Generate Yoco Font
yarn --cwd packages/yoco run build
# or
yarn run build
Yoco Icon
In-house-designed icons for kotti design system.
Installation
Using yarn
yarn add @3yourmind/yoco
Using npm
npm install --save @3yourmind/yoco
Add Yoco Icon to your project
With module bundler
@import '~@3yourmind/yoco'; // might need a sass importer like @3yourmind/sass-node-modules-importer
// enum of icons and the associated ligature / svg name
import { Yoco } from '@3yourmind/yoco'
console.log(Yoco.Icon.ANNOUNCE)
// 'announce'
With HTML
<link rel="stylesheet" href="./path/to/yoco/styles.css" />
Using yoco icons
Yoco uses ligatures, which allows rendering the icon glyph by simply using its name with the yoco font.
<i class="yoco">cloud</i>
<!-- or, use .svg -->
<img src="./path/to/yoco/svg/cloud.svg" />
How to Build and Generate Yoco Font
yarn --cwd packages/yoco run build
# or
yarn run build
