ant-design-vue/components/icon/demo/index.vue

65 lines
2.8 KiB
Vue
Raw Normal View History

2018-01-25 08:29:23 +00:00
<script>
2018-04-06 10:02:59 +00:00
import IconSet from '@/site/components/IconSet/index'
2018-01-25 08:29:23 +00:00
const md = {
cn: `# 图标 Icon
语义化的矢量图形
## 图标的命名规范
我们为每个图标赋予了语义化的命名命名规则如下:
- 实心和描线图标保持同名 \` - o\` 来区分,比如 \`question-circle\`(实心) 和 \`question-circle-o\`(描线);
- 命名顺序\`[图标名]-[形状?]-[描线?]-[方向?]\`
> \`?\` 为可选。
完整的图标设计规范请访问 [图标规范](/docs/spec/icon)
## 如何使用
使用 \`<a-icon />\` 标签声明组件,指定图标对应的 type 属性,示例代码如下:
\`\`\`html
<a-icon type="link" />
\`\`\`
## 本地部署
图标默认托管在 [iconfont.cn](http://iconfont.cn),默认公网可访问。如需本地部署,可参考 [示例](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont)。
## 图标列表
> 点击图标复制代码
`,
us: `# Icon
Semantic vector graphics.
## Icons naming convention
We provide semantic name for every icon, and naming rules are as follows:
- Scanning line icon has the similar name with its solid onebut it's distinguished by \`-o\`, for example, \`question-circle\` (a full circle) and \`question-circle-o\` (an empty circle);
- Naming sequence\`[name]-[shape?]-[outline?]-[direction?]\`.
> \`?\` means is optional.
See more design detail at [here](/docs/spec/icon).
## How To Use
Use tag <a-icon /> to create an icon and set its type in the type prop, for example:
\`\`\`html
<a-icon type="link" />
\`\`\`
## Local deployment
By default, icons are deployed at [iconfont.cn](http://iconfont.cn), publicly available repository of a huge set of icons. In case you need to use a locally deployed version of the icon font, you can refer to [this example](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont)。
## List of icons
> Click the icon and copy the code
`,
}
export default {
2018-03-21 05:31:55 +00:00
category: 'Components',
type: 'General',
title: 'Icon',
subtitle: '图标',
2018-01-25 08:29:23 +00:00
render () {
return (
<div>
<md cn={md.cn} us={md.us}/>
<md cn='### 方向性图标' us='### Directional Icons'/>
<IconSet class='icons' catigory='direction' />
<md cn='### 提示建议性图标' us='### Suggested Icons'/>
<IconSet class='icons' catigory='suggestion' />
<md cn='### 网站通用图标' us='### Application Icons'/>
<IconSet class='icons' catigory='other' />
<md cn='### 品牌和标识' us='### Brand and Logos'/>
<IconSet class='icons' catigory='logo' />
</div>
)
},
}
</script>