Skip to content

Commit

Permalink
docs(icon): update doc
Browse files Browse the repository at this point in the history
  • Loading branch information
@eiinu
eiinu committed Aug 22, 2023
1 parent 90c3188 commit f754579
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 147 deletions.
86 changes: 15 additions & 71 deletions src/packages/__VUE/icon/doc.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Install the [@nutui/icons-vue](https://github.com/jdf2e/nutui-icons) package ind
npm i --save @nutui/icons-vue
```

### Use: SVG import on demand
## Use: SVG import on demand

Use mode of on-demand loading components, see @nutui/icons-vue/dist/types/index.d.ts

Expand Down Expand Up @@ -42,7 +42,7 @@ Loading,Location,Location2,Check,Close,Left,Service,Top,Right,CheckNormal,Checke
| ----- | ---------------------------- | ------------ |
| click | Emitted when icon is clicked | event: Event |

### Use: Full use of IconFont
## Use: Full use of IconFont

```ks
import { createApp } from 'vue';
Expand All @@ -69,7 +69,7 @@ Use `name` prop to set icon name or icon URL.

:::

#### Icon Color
### Icon Color

Use `color` prop to set icon color.

Expand All @@ -85,7 +85,7 @@ Use `color` prop to set icon color.

:::

#### Icon Size
### Icon Size

Use `size` prop to set icon size default unit is `px` .

Expand All @@ -101,7 +101,7 @@ Use `size` prop to set icon size default unit is `px` .

:::

#### Universal motion icons
### Universal motion icons

Adding the specified class class can realize the dynamic effect of the picture. The default is to play once, and adding the `nut-icon-am-infinite` class can realize the loop playback. By setting css, the delay interval before the animation starts, and how long the animation will be completed

Expand All @@ -128,72 +128,6 @@ Adding the specified class class can realize the dynamic effect of the picture.

:::

#### custom iconfont

If you need to use more icons based on the existing Icon, you can import the font file and CSS file corresponding to the third-party iconfont, and then you can use it directly in the Icon component.

> use [iconfont](https://www.iconfont.cn/) recommend
1：first in [iconfont](https://www.iconfont.cn/) generate your custom Icon file and download it to the local project [Docs](https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8d11a391&helptype=code)

```bash
/assets/font/demo.css
/assets/font/demo_index.html
/assets/font/iconfont.css
/assets/font/iconfont.js
/assets/font/iconfont.json
/assets/font/iconfont.ttf
/assets/font/iconfont.woff
/assets/font/iconfont.woff2
```

2：project entry file main.js add `iconfont.css`

```javascript
import './assets/font/iconfont.css';
```

3：use

```html
<!--
font-class-name iconfont
class-prefix icon
name The name value is filled in according to the value in iconfont.css
-->
<IconFont font-class-name="iconfont" class-prefix="icon" name="close" />
```

> Use a third-party custom font library
```css
/* Introduce third-party or custom font icon styles */
@font-face {
font-family: 'my-icon';
src: url('./my-icon.ttf') format('truetype');
}

.my-icon {
font-family: 'my-icon';
}

.my-icon-extra::before {
content: '\e626';
}
```

```html
<!--
font-class-name my-icon
class-prefix my-icon
-->
<IconFont font-class-name="my-icon" class-prefix="my-icon" name="extra" />
```

custom iconfont [Demo](https://github.com/jdf2e/nutui-demo/blob/master/vite/src/App.vue#L15)

## API

### Props

| Attribute | Description | Type | Default |
Expand All @@ -210,3 +144,13 @@ custom iconfont [Demo](https://github.com/jdf2e/nutui-demo/blob/master/vite/src/
| Event | Description | Arguments |
| ----- | ---------------------------- | ------------ |
| click | Emitted when icon is clicked | event: Event |

## Use: other icons

The number of icons provided by `@nutui/icons-vue` itself is limited. If it cannot meet the needs, you can consider using a more versatile and larger number of icon libraries.

- Recommended icon format: SVG

- Recommended icon library: [iconify](https://iconify.design/), which provides more than 150,000 open source icons.

- Recommended icon scheme: [unplugin-icons](https://github.com/antfu/unplugin-icons), which provides a way to introduce `iconify` on demand.
96 changes: 20 additions & 76 deletions src/packages/__VUE/icon/doc.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
npm i --save @nutui/icons-vue
```

### 方式一： SVG 按需使用
## 方式一： SVG 按需使用

按需加载组件使用方式，可选项见 @nutui/icons-vue/dist/types/index.d.ts

Expand Down Expand Up @@ -42,7 +42,7 @@ Loading,Location,Location2,Check,Close,Left,Service,Top,Right,CheckNormal,Checke
| ------ | -------------- | ------------ |
| click | 点击图标时触发 | event: Event |

### 方式二： IconFont 全量使用
## 方式二： IconFont 全量使用

```js
import { createApp } from 'vue';
Expand Down Expand Up @@ -128,85 +128,29 @@ app.use(IconFont);

:::

#### 自定义图标

如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。

> 方案一 引入 [iconfont](https://www.iconfont.cn/) 推荐此方案
第一步：首先在 [iconfont](https://www.iconfont.cn/) 生成你自定义的 Icon 文件下载存放至本地项目 [详细使用说明](https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8d11a391&helptype=code)

```bash
/assets/font/demo.css
/assets/font/demo_index.html
/assets/font/iconfont.css
/assets/font/iconfont.js
/assets/font/iconfont.json
/assets/font/iconfont.ttf
/assets/font/iconfont.woff
/assets/font/iconfont.woff2
```

第二步：项目入口文件 main.js 引用 `iconfont.css`

```javascript
import './assets/font/iconfont.css';
```

第三步：

```html
<!--
font-class-name 指定类名为默认 iconfont
class-prefix 指定默认 icon
name 值根据 iconfont.css 中值对应填写
-->
<IconFont font-class-name="iconfont" class-prefix="icon" name="close" />
```

> 方案二 第三方自定义字体库
```css
/* 引入第三方或自定义的字体图标样式 */
@font-face {
font-family: 'my-icon';
src: url('./my-icon.ttf') format('truetype');
}

.my-icon {
font-family: 'my-icon';
}

.my-icon-extra::before {
content: '\e626';
}
```

```html
<!--
font-class-name 指定类名为默认 my-icon
class-prefix 指定默认 my-icon
-->
<IconFont font-class-name="my-icon" class-prefix="my-icon" name="extra" />
```

自定义 iconfont [Demo 示例](https://github.com/jdf2e/nutui-demo/blob/master/vite/src/App.vue#L15)

## IconFont API

### Props

| 参数 | 说明 | 类型 | 默认值 |
| --------------- | ------------------------------------------ | ---------------- | ---------------- |
| name | 图标名称或图片链接 | string | - |
| color | 图标颜色 | string | - |
| size | 图标大小，如 `20px` `2em` `2rem` | string \| object | - |
| font-class-name | 自定义 `icon` 字体基础类名 | string | `nutui-iconfont` |
| class-prefix | 自定义 `icon` 类名前缀，用于使用自定义图标 | string | `nut-icon` |
| tag | `HTML` 标签 | string | `i` |
| 参数 | 说明 | 类型 | 默认值 |
| --------------- | -------------------------------- | ---------------- | ---------------- |
| name | 图标名称或图片链接 | string | - |
| color | 图标颜色 | string | - |
| size | 图标大小，如 `20px` `2em` `2rem` | string \| object | - |
| font-class-name | 自定义 `icon` 字体基础类名 | string | `nutui-iconfont` |
| class-prefix | 自定义 `icon` 类名前缀 | string | `nut-icon` |
| tag | `HTML` 标签 | string | `i` |

### Events

| 事件名 | 说明 | 回调参数 |
| ------ | -------------- | ------------ |
| click | 点击图标时触发 | event: Event |

## 方式三：使用自定义图标库

`@nutui/icons-vue` 本身提供的图标数量有限，如果不能满足需求，可以考虑使用通用性更强、数量更多的图标库。

- 推荐图标格式：SVG

- 推荐图标库：[iconify](https://iconify.design/)，它提供了超过 150,000 个开源图标。

- 推荐图标方案：[unplugin-icons](https://github.com/antfu/unplugin-icons)，它提供了按需引入 `iconify` 的方式。

0 comments on commit f754579

Please sign in to comment.