Skip to content

Commit

Permalink
fix doc and icon size
Browse files Browse the repository at this point in the history
  • Loading branch information
Wendell committed Sep 30, 2018
1 parent f4f98cb commit 87a4672
Show file tree
Hide file tree
Showing 3 changed files with 13 additions and 5 deletions.
6 changes: 5 additions & 1 deletion components/icon/doc/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ All props of input supported by [w3c standards](https://www.w3schools.com/tags/t
| `fetchFromIconfont()` | To get icon assets from fonticon | `NzIconfontOption` |
| `changeAssetsSource()` | To change the location of your icon assets, so that you can deploy these icons wherever you want | `string` |

### Svg icons
### SVG icons

After `1.7.0` version,we synced to Ant Design `3.9.x` and replaced font icons with svg icons which bring benefits below:

Expand Down Expand Up @@ -107,6 +107,10 @@ Dynamic importing. This way would not increase your bundle's size. When NG-ZORRO

You can call `changeAssetsSource()` of `NzIconService` to change the location of your icon assets, so that you can deploy these icon assets to cdn. The parameter you passed would be add in front of `assets/`.

Let's assume that you deploy static assets under `https://mycdn.alibaba-inc.com/assets`. You can call `changeAssetsSource('https://mycdn.alibaba-inc.com/')` to tell NG-ZORRO that all your resources are located there.

Please call this in component's constructor or `AppInitService`.

### Set TwoTone Color

When using the two-tone icons, you can change the property of `NzIconService` to specify the primary color: `this.iconService.twoToneColor = { primaryColor: '#1890ff' }`.
Expand Down
10 changes: 7 additions & 3 deletions components/icon/doc/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,9 @@ hasPageDemo: true
| `fetchFromIconfont()` | 用于从 FontIcon 获取图标资源文件 | `NzIconfontOption` |
| `changeAssetsSource()` | 用于修改动态加载 icon 的资源前缀,使得你可以部署图标资源到你想要的任何位置,例如 cdn | `string` |

### Svg 图标
### SVG 图标

`1.7.0` 版本后,我们与 Ant Design `3.9.x` 同步,使用了 svg 图标替换了原先的 font 图标,从而带来了以下优势:
`1.7.0` 版本开始,我们与 Ant Design `3.9.x` 同步,使用了 svg 图标替换了原先的 font 图标,从而带来了以下优势:

- 完全离线化使用,不需要从支付宝 cdn 下载字体文件,图标不会因为网络问题呈现方块,也无需字体文件本地部署。
- 在低端设备上 svg 有更好的清晰度。
Expand Down Expand Up @@ -106,13 +106,17 @@ export class AppComponent implements OnInit, AfterViewInit {

你可以通过 `NzIconService``changeAssetsSource()` 方法来修改图标资源的位置,这样你就可以部署这些资源到 cdn 上。你的参数会被直接添加到 `assets/` 的前面。

例如,你在 `https://mycdn.alibaba-inc.com/assets` 目录下部署了静态资源文件,那么你就可以通过调用 `changeAssetsSource('https://mycdn.alibaba-inc.com/')`,来告诉 NG-ZORRO 从这个位置动态加载图标资源。

请在 constructor 里或者在 `AppInitService` 里调用这个方法。

### 双色图标主色

对于双色图标,可以通过修改 `this.iconService.twoToneColor = { primaryColor: '#1890ff' }` 来全局设置图标主色。你还可以访问这个属性获取当前的全局主色。

### 自定义 font 图标

`1.7.0` ,我们提供了一个 `fetchFromIconfont` 方法,方便开发者调用在 iconfont.cn 上自行管理的图标。
`1.7.0` 版本开始,我们提供了一个 `fetchFromIconfont` 方法,方便开发者调用在 iconfont.cn 上自行管理的图标。

```ts
this._iconService.fetchFromIconfont({
Expand Down
2 changes: 1 addition & 1 deletion components/icon/page/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ const newIconNames: string[] = [
font-size: 18px;
}`,
`ul.anticons-list li .anticon {
font-size: 36px;
font-size: 24px;
}`
]
})
Expand Down

0 comments on commit 87a4672

Please sign in to comment.