use svg icon in introduce

This commit is contained in:
HeskeyBaozi 2018-08-21 18:33:52 +08:00
parent 1b93d795e0
commit 96b38dd3ec
4 changed files with 97 additions and 21 deletions

View File

@ -1,10 +1,6 @@
@import "../../style/mixins/index";
@tree-prefix-cls: ~"@{ant-prefix}-tree";
@tree-default-open-icon: "\e606";
@tree-showline-open-icon: "\e621";
@tree-showline-close-icon: "\e645";
@tree-doc-icon: "\e664";
.antTreeSwitcherIcon(@type: "tree-default-open-icon") {
.@{tree-prefix-cls}-switcher-icon {

View File

@ -26,13 +26,54 @@ We supply a series of design principles, practical patterns and high quality des
[React](http://facebook.github.io/react/) is used to encapsulate a library of components which embody our design language. We welcome the community to implement [our design system](https://ant.design/docs/spec/introduce) in other front-end frameworks of their choice.
- [Ant Design of React](/docs/react/introduce) (official implementation)
- <div class="outside-link"><a href="http://ng.ant.design" target="_blank">NG-ZORRO - Ant Design of Angular</a></div>
- <div class="outside-link"><a href="https://github.com/FE-Driver/vue-beauty" target="_blank">vue-beauty (vue)</a></div>
- <div class="outside-link"><a href="https://github.com/priornix/antizer" target="_blank">antizer (ClojureScript)</a></div>
- <div class="outside-link"><a href="https://github.com/idcos/antd-ember" target="_blank">antd-ember</a></div>
- <div class="outside-link"><a href="https://github.com/zzuu666/antue" target="_blank">antue (vue)</a></div>
- <div class="outside-link"><a href="https://github.com/vueComponent/ant-design" target="_blank">vue-antd-ui - Ant Design of Vue.js 2.5.0+</a></div>
```__react
import { Icon } from 'antd';
const LinkIcon = () => (
<Icon type="export" className="outside-link-icon" />
);
const LinksList = () => (
<ul>
<li>
<a href="/docs/react/introduce" target="_blank">Ant Design of React</a>
(official implementation)
</li>
<li>
<a href="http://ng.ant.design" target="_blank">
NG-ZORRO - Ant Design of Angular<LinkIcon />
</a>
</li>
<li>
<a href="https://github.com/FE-Driver/vue-beauty" target="_blank">
vue-beauty (vue)<LinkIcon />
</a>
</li>
<li>
<a href="https://github.com/priornix/antizer" target="_blank">
antizer (ClojureScript)<LinkIcon />
</a>
</li>
<li>
<a href="https://github.com/idcos/antd-ember" target="_blank">
antd-ember<LinkIcon />
</a>
</li>
<li>
<a href="https://github.com/zzuu666/antue" target="_blank">
antue (vue)<LinkIcon />
</a>
</li>
<li>
<a href="https://github.com/vueComponent/ant-design" target="_blank">
vue-antd-ui - Ant Design of Vue.js 2.5.0+<LinkIcon />
</a>
</li>
</ul>
);
ReactDOM.render(<LinksList />, mountNode);
```
## Who's using Ant Design

View File

@ -28,13 +28,54 @@ title: 介绍
我们采用 [React](http://facebook.github.io/react/) 封装了一套 Ant Design 的组件库,也欢迎社区其他框架的实现版本。
- [Ant Design of React](/docs/react/introduce)(官方实现)
- <div class="outside-link"><a href="http://ng.ant.design" target="_blank">NG-ZORRO - Ant Design of Angular</a></div>
- <div class="outside-link"><a href="https://github.com/FE-Driver/vue-beauty" target="_blank">vue-beauty (vue)</a></div>
- <div class="outside-link"><a href="https://github.com/priornix/antizer" target="_blank">antizer (ClojureScript)</a></div>
- <div class="outside-link"><a href="https://github.com/idcos/antd-ember" target="_blank">antd-ember</a></div>
- <div class="outside-link"><a href="https://github.com/zzuu666/antue" target="_blank">antue (vue)</a></div>
- <div class="outside-link"><a href="https://github.com/vueComponent/ant-design" target="_blank">vue-antd-ui - Ant Design of Vue.js 2.5.0+</a></div>
```__react
import { Icon } from 'antd';
const LinkIcon = () => (
<Icon type="export" className="outside-link-icon" />
);
const LinksList = () => (
<ul>
<li>
<a href="/docs/react/introduce" target="_blank">Ant Design of React</a>
(官方实现)
</li>
<li>
<a href="http://ng.ant.design" target="_blank">
NG-ZORRO - Ant Design of Angular<LinkIcon />
</a>
</li>
<li>
<a href="https://github.com/FE-Driver/vue-beauty" target="_blank">
vue-beauty (vue)<LinkIcon />
</a>
</li>
<li>
<a href="https://github.com/priornix/antizer" target="_blank">
antizer (ClojureScript)<LinkIcon />
</a>
</li>
<li>
<a href="https://github.com/idcos/antd-ember" target="_blank">
antd-ember<LinkIcon />
</a>
</li>
<li>
<a href="https://github.com/zzuu666/antue" target="_blank">
antue (vue)<LinkIcon />
</a>
</li>
<li>
<a href="https://github.com/vueComponent/ant-design" target="_blank">
vue-antd-ui - Ant Design of Vue.js 2.5.0+<LinkIcon />
</a>
</li>
</ul>
);
ReactDOM.render(<LinksList />, mountNode);
```
## 谁在使用

View File

@ -90,9 +90,7 @@ a {
display: inline-block;
}
.outside-link:after {
content: '\e691';
font-family: 'anticon';
.outside-link-icon {
margin-left: 5px;
font-size: 12px;
color: #aaa;