-
Notifications
You must be signed in to change notification settings - Fork 4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Wendell
committed
Sep 21, 2018
1 parent
bab6ea7
commit 31bc03c
Showing
13 changed files
with
281 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| --- | ||
| order: 2 | ||
| title: | ||
| zh-CN: 自定义图标 | ||
| en-US: Custom Icon | ||
| --- | ||
|
|
||
| ## zh-CN | ||
|
|
||
| 你可以直接将 `svg` 标签放在 `nz-icon` 中来渲染自定义内容。 | ||
|
|
||
| ## en-US | ||
|
|
||
| You can just put a `svg` element inside of a `nz-icon` to render custom content. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import { Component } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'nz-demo-icon-custom', | ||
| template: ` | ||
| <div class="icons-list"> | ||
| <i nz-icon style="color: hotpink;"> | ||
| <svg> | ||
| <path d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z" /> | ||
| </svg> | ||
| </i> | ||
| <i nz-icon style="font-size: 32px;"> | ||
| <svg> | ||
| <path d="M99.096 315.634s-82.58-64.032-82.58-132.13c0-66.064 33.032-165.162 148.646-148.646 83.37 11.91 99.096 165.162 99.096 165.162l-165.162 115.614zM924.906 315.634s82.58-64.032 82.58-132.13c0-66.064-33.032-165.162-148.646-148.646-83.37 11.91-99.096 165.162-99.096 165.162l165.162 115.614z" fill="#6B676E" p-id="1143" /> | ||
| <path d="M1024 561.548c0 264.526-229.23 429.42-512.002 429.42S0 826.076 0 561.548 283.96 66.064 512.002 66.064 1024 297.022 1024 561.548z" fill="#FFEBD2" p-id="1144" /> | ||
| <path d="M330.324 842.126c0 82.096 81.34 148.646 181.678 148.646s181.678-66.55 181.678-148.646H330.324z" fill="#E9D7C3" p-id="1145" /> | ||
| <path d="M644.13 611.098C594.582 528.516 561.55 512 512.002 512c-49.548 0-82.58 16.516-132.13 99.096-42.488 70.814-78.73 211.264-49.548 247.742 66.064 82.58 165.162 33.032 181.678 33.032 16.516 0 115.614 49.548 181.678-33.032 29.18-36.476-7.064-176.93-49.55-247.74z" fill="#FFFFFF" p-id="1146" /> | ||
| <path d="M611.098 495.484c0-45.608 36.974-82.58 82.58-82.58 49.548 0 198.194 99.098 198.194 165.162s-79.934 144.904-148.646 99.096c-49.548-33.032-132.128-148.646-132.128-181.678zM412.904 495.484c0-45.608-36.974-82.58-82.58-82.58-49.548 0-198.194 99.098-198.194 165.162s79.934 144.904 148.646 99.096c49.548-33.032 132.128-148.646 132.128-181.678z" fill="#6B676E" p-id="1147" /> | ||
| <path d="M512.002 726.622c-30.06 0-115.614 5.668-115.614 33.032 0 49.638 105.484 85.24 115.614 82.58 10.128 2.66 115.614-32.944 115.614-82.58-0.002-27.366-85.556-33.032-115.614-33.032z" fill="#464655" p-id="1148" /> | ||
| <path d="M330.324 495.484m-33.032 0a33.032 33.032 0 1 0 66.064 0 33.032 33.032 0 1 0-66.064 0Z" fill="#464655" p-id="1149" /> | ||
| <path d="M693.678 495.484m-33.032 0a33.032 33.032 0 1 0 66.064 0 33.032 33.032 0 1 0-66.064 0Z" fill="#464655" p-id="1150" /> | ||
| </svg> | ||
| </i> | ||
| </div> | ||
| `, | ||
| styles : [ ` | ||
| .icons-list > .anticon { | ||
| margin-right: 6px; | ||
| font-size: 24px; | ||
| } | ||
| ` ] | ||
| }) | ||
| export class NzDemoIconCustomComponent { | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| --- | ||
| order: 3 | ||
| title: | ||
| zh-CN: 使用 Iconfont.cn | ||
| en-US: Use iconfont.cn | ||
| --- | ||
|
|
||
| ## zh-CN | ||
|
|
||
| 对于使用 [iconfont.cn](http://iconfont.cn/) 的用户，通过设置 `createFromIconfontCN` 方法参数对象中的 `scriptUrl` 字段， 即可轻松地使用已有项目中的图标。 | ||
|
|
||
| ## en-US | ||
|
|
||
| If you are using [iconfont.cn](http://iconfont.cn/), you can use the icons in your project gracefully. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { Component } from '@angular/core'; | ||
| import { NzIconService } from 'ng-zorro-antd'; | ||
|
|
||
| @Component({ | ||
| selector: 'nz-demo-icon-iconfont', | ||
| template: ` | ||
| <div class="icons-list"> | ||
| <i nz-icon [iconfont]="'icon-tuichu'"></i> | ||
| <i nz-icon [iconfont]="'icon-facebook'" ></i> | ||
| <i nz-icon [iconfont]="'icon-twitter'"></i> | ||
| </div> | ||
| `, | ||
| styles : [ ` | ||
| .icons-list > .anticon { | ||
| margin-right: 6px; | ||
| font-size: 24px; | ||
| } | ||
| ` ] | ||
| }) | ||
| export class NzDemoIconIconfontComponent { | ||
| constructor(private _iconService: NzIconService) { | ||
| this._iconService.fetchFromIconfont({ | ||
| scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js' | ||
| }); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| --- | ||
| order: 1 | ||
| title: | ||
| zh-CN: 多色图标 | ||
| en-US: Two-tone icon and colorful icon | ||
| --- | ||
|
|
||
| ## zh-CN | ||
|
|
||
| 可以通过设置 `theme` 属性为 `twotone` 来渲染双色图标，并且可以设置主题色。 | ||
|
|
||
| ## en-US | ||
|
|
||
|
|
||
| Specify property `theme` to `twotone` to render two-tone icons. You can also the primary color.` prop to show spinning animation and the theme property to switch different themes. Old API `<i class="anticon"></i>` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import { Component } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'nz-demo-icon-twotone', | ||
| template: ` | ||
| <div class="icons-list"> | ||
| <i nz-icon [type]="'smile'" [theme]="'twotone'"></i> | ||
| <i nz-icon [type]="'heart'" [theme]="'twotone'" [twoToneColor]="'#eb2f96'"></i> | ||
| <i nz-icon [type]="'check-circle'" [theme]="'twotone'" [twoToneColor]="'#52c41a'"></i> | ||
| </div> | ||
| `, | ||
| styles : [ ` | ||
| .icons-list > .anticon { | ||
| margin-right: 6px; | ||
| font-size: 24px; | ||
| } | ||
| ` ] | ||
| }) | ||
| export class NzDemoIconTwotoneComponent { | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,58 @@ | ||
| import { Injectable } from '@angular/core'; | ||
| import { DOCUMENT } from '@angular/common'; | ||
| import { HttpClient } from '@angular/common/http'; | ||
| import { Inject, Injectable, Optional, RendererFactory2 } from '@angular/core'; | ||
| import { IconService } from 'ant-icons-angular'; | ||
|
|
||
| export interface NzIconfontOption { | ||
| scriptUrl: string; | ||
| } | ||
|
|
||
| /** | ||
| * It should be a global singleton, otherwise registered icons could not be found. | ||
| */ | ||
| @Injectable({ | ||
| providedIn: 'root' | ||
| }) | ||
| export class NzIconService extends IconService { | ||
| private _iconfontCache = new Set<string>(); | ||
|
|
||
| warnedAboutAPI = false; | ||
|
|
||
| normalizeSvgElement(svg: SVGElement): void { | ||
| if (!svg.getAttribute('viewBox')) { | ||
| this._renderer.setAttribute(svg, 'viewBox', '0 0 1024 1024'); | ||
| } | ||
| if (!svg.getAttribute('width') || !svg.getAttribute('height')) { | ||
| this._renderer.setAttribute(svg, 'width', '1em'); | ||
| this._renderer.setAttribute(svg, 'height', '1em'); | ||
| } | ||
| if (!svg.getAttribute('fill')) { | ||
| this._renderer.setAttribute(svg, 'fill', 'currentColor'); | ||
| } | ||
| } | ||
|
|
||
| fetchFromIconfont(opt: NzIconfontOption): void { | ||
| const { scriptUrl } = opt; | ||
| if (this._document && !this._iconfontCache.has(scriptUrl)) { | ||
| const script = this._renderer.createElement('script'); | ||
| this._renderer.setAttribute(script, 'src', `https:${ scriptUrl }`); | ||
| this._renderer.setAttribute(script, 'data-namespace', scriptUrl); | ||
| this._iconfontCache.add(scriptUrl); | ||
| this._renderer.appendChild(this._document.body, script); | ||
| } | ||
| } | ||
|
|
||
| createIconfontIcon(type: string): SVGElement { | ||
| const svgString = `<svg><use xlink:href="${type}"></svg>`; | ||
| return this._createSVGElementFromString(svgString); | ||
| } | ||
|
|
||
| constructor( | ||
| protected _rendererFactory: RendererFactory2, | ||
| @Optional() protected _http: HttpClient, | ||
| // tslint:disable:no-any | ||
| @Optional() @Inject(DOCUMENT) protected _document: any | ||
| ) { | ||
| super(_rendererFactory, _http, _document); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.