feat: update icon
tangjinzhou
parent
02a0012dcb
commit
6da26a9bc4
|
|
@ -0,0 +1,53 @@
|
||||||
|
import Icon from './index'
|
||||||
|
|
||||||
|
const customCache = new Set()
|
||||||
|
|
||||||
|
export default function create (options) {
|
||||||
|
const { scriptUrl } = options
|
||||||
|
|
||||||
|
/**
|
||||||
|
* DOM API required.
|
||||||
|
* Make sure in browser environment.
|
||||||
|
* The Custom Icon will create a <script/>
|
||||||
|
* that loads SVG symbols and insert the SVG Element into the document body.
|
||||||
|
*/
|
||||||
|
if (typeof document !== 'undefined' && typeof window !== 'undefined' &&
|
||||||
|
typeof document.createElement === 'function' &&
|
||||||
|
typeof scriptUrl === 'string' && scriptUrl.length &&
|
||||||
|
!customCache.has(scriptUrl)
|
||||||
|
) {
|
||||||
|
const script = document.createElement('script')
|
||||||
|
script.setAttribute('src', scriptUrl)
|
||||||
|
script.setAttribute('data-namespace', scriptUrl)
|
||||||
|
customCache.add(scriptUrl)
|
||||||
|
document.body.appendChild(script)
|
||||||
|
}
|
||||||
|
|
||||||
|
const Iconfont = {
|
||||||
|
functional: true,
|
||||||
|
name: 'AIconfont',
|
||||||
|
render (h, context) {
|
||||||
|
const { props, slots, listeners } = context
|
||||||
|
const { type, ...restProps } = props
|
||||||
|
const slotsMap = slots()
|
||||||
|
const children = slotsMap.default
|
||||||
|
// component > children > type
|
||||||
|
let content = null
|
||||||
|
if (type) {
|
||||||
|
content = <use {...{ attrs: { 'xlink:href': `#${type}` }}} />
|
||||||
|
}
|
||||||
|
if (children) {
|
||||||
|
content = children
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<Icon
|
||||||
|
{...{ props: restProps, on: listeners }}
|
||||||
|
>
|
||||||
|
{content}
|
||||||
|
</Icon>
|
||||||
|
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
return Iconfont
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
<cn>
|
||||||
|
#### 基本用法
|
||||||
|
使用 `<Icon />` 标签声明组件，指定图标对应的 `type` 属性。可以通过 `theme` 属性来设置不同的主题风格的图标，也可以通过设置 `spin` 属性来实现动画旋转效果。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Basic
|
||||||
|
Use tag `<Icon />` to create an icon and set its type in the `type` prop. Specific the `spin` property to show spinning animation and the `theme` property to switch different themes.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<div class="icons-list">
|
||||||
|
<a-icon type="home" />
|
||||||
|
<a-icon type="setting" theme="filled" />
|
||||||
|
<a-icon type="smile" theme="outlined" />
|
||||||
|
<a-icon type="sync" spin />
|
||||||
|
<a-icon type="loading" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style scoped>
|
||||||
|
.icons-list >>> .anticon {
|
||||||
|
margin-right: 6px;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,76 @@
|
||||||
|
<cn>
|
||||||
|
#### 自定义图标
|
||||||
|
利用 `Icon` 组件封装一个可复用的自定义图标。可以通过 `component` 属性传入一个组件来渲染最终的图标，以满足特定的需求。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Basic
|
||||||
|
Create a reusable Vue component by using `<Icon component={...} />`. The property `component` takes a Vue component that renders to `svg` element.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<div class="custom-icons-list">
|
||||||
|
<HeartIcon :style="{ color: 'hotpink' }" />
|
||||||
|
<PandaIcon :style="{ fontSize: '32px' }" />
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
const HeartSvg = {
|
||||||
|
template: `
|
||||||
|
<svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
|
||||||
|
<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>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
const PandaSvg = {
|
||||||
|
template: `
|
||||||
|
<svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
|
||||||
|
<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>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
const HeartIcon = {
|
||||||
|
template: `
|
||||||
|
<a-icon :component="HeartSvg" />
|
||||||
|
`,
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
HeartSvg
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const PandaIcon = {
|
||||||
|
template: `
|
||||||
|
<a-icon :component="PandaSvg" />
|
||||||
|
`,
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
PandaSvg
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
HeartIcon,
|
||||||
|
PandaIcon,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.custom-icons-list >>> .anticon {
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
<cn>
|
||||||
|
#### 使用 iconfont.cn
|
||||||
|
对于使用 [iconfont.cn](http://iconfont.cn/) 的用户，通过设置 `createFromIconfontCN` 方法参数对象中的 `scriptUrl` 字段， 即可轻松地使用已有项目中的图标。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Use iconfont.cn
|
||||||
|
If you are using [iconfont.cn](http://iconfont.cn/), you can use the icons in your project gracefully.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<div class="icons-list">
|
||||||
|
<IconFont type="icon-tuichu" />
|
||||||
|
<IconFont type="icon-facebook" />
|
||||||
|
<IconFont type="icon-twitter" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { Icon } from 'antd';
|
||||||
|
|
||||||
|
const IconFont = Icon.createFromIconfontCN({
|
||||||
|
scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
|
||||||
|
})
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
IconFont,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.icons-list >>> .anticon {
|
||||||
|
margin-right: 6px;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -42,6 +42,7 @@ const md = {
|
||||||
export default {
|
export default {
|
||||||
category: 'Components',
|
category: 'Components',
|
||||||
type: 'General',
|
type: 'General',
|
||||||
|
zhType: '通用',
|
||||||
title: 'Icon',
|
title: 'Icon',
|
||||||
subtitle: '图标',
|
subtitle: '图标',
|
||||||
render () {
|
render () {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,318 @@
|
||||||
|
<cn>
|
||||||
|
#### 老版图标
|
||||||
|
测试 1.2.0 之前的老图标。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Test old icons
|
||||||
|
Test old icons before `1.2.0`.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<a-icon v-for="icon in icons" :key="icon" :type="icon" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
const icons = [
|
||||||
|
'step-backward',
|
||||||
|
'step-forward',
|
||||||
|
'fast-backward',
|
||||||
|
'fast-forward',
|
||||||
|
'shrink',
|
||||||
|
'arrows-alt',
|
||||||
|
'down',
|
||||||
|
'up',
|
||||||
|
'left',
|
||||||
|
'right',
|
||||||
|
'caret-up',
|
||||||
|
'caret-down',
|
||||||
|
'caret-left',
|
||||||
|
'caret-right',
|
||||||
|
'up-circle',
|
||||||
|
'down-circle',
|
||||||
|
'left-circle',
|
||||||
|
'right-circle',
|
||||||
|
'up-circle-o',
|
||||||
|
'down-circle-o',
|
||||||
|
'right-circle-o',
|
||||||
|
'left-circle-o',
|
||||||
|
'double-right',
|
||||||
|
'double-left',
|
||||||
|
'verticle-left',
|
||||||
|
'verticle-right',
|
||||||
|
'forward',
|
||||||
|
'backward',
|
||||||
|
'rollback',
|
||||||
|
'enter',
|
||||||
|
'retweet',
|
||||||
|
'swap',
|
||||||
|
'swap-left',
|
||||||
|
'swap-right',
|
||||||
|
'arrow-up',
|
||||||
|
'arrow-down',
|
||||||
|
'arrow-left',
|
||||||
|
'arrow-right',
|
||||||
|
'play-circle',
|
||||||
|
'play-circle-o',
|
||||||
|
'up-square',
|
||||||
|
'down-square',
|
||||||
|
'left-square',
|
||||||
|
'right-square',
|
||||||
|
'up-square-o',
|
||||||
|
'down-square-o',
|
||||||
|
'left-square-o',
|
||||||
|
'right-square-o',
|
||||||
|
'login',
|
||||||
|
'logout',
|
||||||
|
'menu-fold',
|
||||||
|
'menu-unfold',
|
||||||
|
'question',
|
||||||
|
'question-circle-o',
|
||||||
|
'question-circle',
|
||||||
|
'plus',
|
||||||
|
'plus-circle-o',
|
||||||
|
'plus-circle',
|
||||||
|
'pause',
|
||||||
|
'pause-circle-o',
|
||||||
|
'pause-circle',
|
||||||
|
'minus',
|
||||||
|
'minus-circle-o',
|
||||||
|
'minus-circle',
|
||||||
|
'plus-square',
|
||||||
|
'plus-square-o',
|
||||||
|
'minus-square',
|
||||||
|
'minus-square-o',
|
||||||
|
'info',
|
||||||
|
'info-circle-o',
|
||||||
|
'info-circle',
|
||||||
|
'exclamation',
|
||||||
|
'exclamation-circle-o',
|
||||||
|
'exclamation-circle',
|
||||||
|
'close',
|
||||||
|
'cross',
|
||||||
|
'close-circle',
|
||||||
|
'close-circle-o',
|
||||||
|
'close-square',
|
||||||
|
'close-square-o',
|
||||||
|
'check',
|
||||||
|
'check-circle',
|
||||||
|
'check-circle-o',
|
||||||
|
'check-square',
|
||||||
|
'check-square-o',
|
||||||
|
'clock-circle-o',
|
||||||
|
'clock-circle',
|
||||||
|
'warning',
|
||||||
|
'lock',
|
||||||
|
'unlock',
|
||||||
|
'area-chart',
|
||||||
|
'pie-chart',
|
||||||
|
'bar-chart',
|
||||||
|
'dot-chart',
|
||||||
|
'bars',
|
||||||
|
'book',
|
||||||
|
'calendar',
|
||||||
|
'cloud',
|
||||||
|
'cloud-download',
|
||||||
|
'code',
|
||||||
|
'code-o',
|
||||||
|
'copy',
|
||||||
|
'credit-card',
|
||||||
|
'delete',
|
||||||
|
'desktop',
|
||||||
|
'download',
|
||||||
|
'edit',
|
||||||
|
'ellipsis',
|
||||||
|
'file',
|
||||||
|
'file-text',
|
||||||
|
'file-unknown',
|
||||||
|
'file-pdf',
|
||||||
|
'file-word',
|
||||||
|
'file-excel',
|
||||||
|
'file-jpg',
|
||||||
|
'file-ppt',
|
||||||
|
'file-markdown',
|
||||||
|
'file-add',
|
||||||
|
'folder',
|
||||||
|
'folder-open',
|
||||||
|
'folder-add',
|
||||||
|
'hdd',
|
||||||
|
'frown',
|
||||||
|
'frown-o',
|
||||||
|
'meh',
|
||||||
|
'meh-o',
|
||||||
|
'smile',
|
||||||
|
'smile-o',
|
||||||
|
'inbox',
|
||||||
|
'laptop',
|
||||||
|
'appstore-o',
|
||||||
|
'appstore',
|
||||||
|
'line-chart',
|
||||||
|
'link',
|
||||||
|
'mail',
|
||||||
|
'mobile',
|
||||||
|
'notification',
|
||||||
|
'paper-clip',
|
||||||
|
'picture',
|
||||||
|
'poweroff',
|
||||||
|
'reload',
|
||||||
|
'search',
|
||||||
|
'setting',
|
||||||
|
'share-alt',
|
||||||
|
'shopping-cart',
|
||||||
|
'tablet',
|
||||||
|
'tag',
|
||||||
|
'tag-o',
|
||||||
|
'tags',
|
||||||
|
'tags-o',
|
||||||
|
'to-top',
|
||||||
|
'upload',
|
||||||
|
'user',
|
||||||
|
'video-camera',
|
||||||
|
'home',
|
||||||
|
'loading',
|
||||||
|
'loading-3-quarters',
|
||||||
|
'cloud-upload-o',
|
||||||
|
'cloud-download-o',
|
||||||
|
'cloud-upload',
|
||||||
|
'cloud-o',
|
||||||
|
'star-o',
|
||||||
|
'star',
|
||||||
|
'heart-o',
|
||||||
|
'heart',
|
||||||
|
'environment',
|
||||||
|
'environment-o',
|
||||||
|
'eye',
|
||||||
|
'eye-o',
|
||||||
|
'camera',
|
||||||
|
'camera-o',
|
||||||
|
'save',
|
||||||
|
'team',
|
||||||
|
'solution',
|
||||||
|
'phone',
|
||||||
|
'filter',
|
||||||
|
'exception',
|
||||||
|
'export',
|
||||||
|
'customer-service',
|
||||||
|
'qrcode',
|
||||||
|
'scan',
|
||||||
|
'like',
|
||||||
|
'like-o',
|
||||||
|
'dislike',
|
||||||
|
'dislike-o',
|
||||||
|
'message',
|
||||||
|
'pay-circle',
|
||||||
|
'pay-circle-o',
|
||||||
|
'calculator',
|
||||||
|
'pushpin',
|
||||||
|
'pushpin-o',
|
||||||
|
'bulb',
|
||||||
|
'select',
|
||||||
|
'switcher',
|
||||||
|
'rocket',
|
||||||
|
'bell',
|
||||||
|
'disconnect',
|
||||||
|
'database',
|
||||||
|
'compass',
|
||||||
|
'barcode',
|
||||||
|
'hourglass',
|
||||||
|
'key',
|
||||||
|
'flag',
|
||||||
|
'layout',
|
||||||
|
'printer',
|
||||||
|
'sound',
|
||||||
|
'usb',
|
||||||
|
'skin',
|
||||||
|
'tool',
|
||||||
|
'sync',
|
||||||
|
'wifi',
|
||||||
|
'car',
|
||||||
|
'schedule',
|
||||||
|
'user-add',
|
||||||
|
'user-delete',
|
||||||
|
'usergroup-add',
|
||||||
|
'usergroup-delete',
|
||||||
|
'man',
|
||||||
|
'woman',
|
||||||
|
'shop',
|
||||||
|
'gift',
|
||||||
|
'idcard',
|
||||||
|
'medicine-box',
|
||||||
|
'red-envelope',
|
||||||
|
'coffee',
|
||||||
|
'copyright',
|
||||||
|
'trademark',
|
||||||
|
'safety',
|
||||||
|
'wallet',
|
||||||
|
'bank',
|
||||||
|
'trophy',
|
||||||
|
'contacts',
|
||||||
|
'global',
|
||||||
|
'shake',
|
||||||
|
'api',
|
||||||
|
'fork',
|
||||||
|
'dashboard',
|
||||||
|
'form',
|
||||||
|
'table',
|
||||||
|
'profile',
|
||||||
|
'android',
|
||||||
|
'android-o',
|
||||||
|
'apple',
|
||||||
|
'apple-o',
|
||||||
|
'windows',
|
||||||
|
'windows-o',
|
||||||
|
'ie',
|
||||||
|
'chrome',
|
||||||
|
'github',
|
||||||
|
'aliwangwang',
|
||||||
|
'aliwangwang-o',
|
||||||
|
'dingding',
|
||||||
|
'dingding-o',
|
||||||
|
'weibo-square',
|
||||||
|
'weibo-circle',
|
||||||
|
'taobao-circle',
|
||||||
|
'html5',
|
||||||
|
'weibo',
|
||||||
|
'twitter',
|
||||||
|
'wechat',
|
||||||
|
'youtube',
|
||||||
|
'alipay-circle',
|
||||||
|
'taobao',
|
||||||
|
'skype',
|
||||||
|
'qq',
|
||||||
|
'medium-workmark',
|
||||||
|
'gitlab',
|
||||||
|
'medium',
|
||||||
|
'linkedin',
|
||||||
|
'google-plus',
|
||||||
|
'dropbox',
|
||||||
|
'facebook',
|
||||||
|
'codepen',
|
||||||
|
'amazon',
|
||||||
|
'google',
|
||||||
|
'codepen-circle',
|
||||||
|
'alipay',
|
||||||
|
'ant-design',
|
||||||
|
'aliyun',
|
||||||
|
'zhihu',
|
||||||
|
'slack',
|
||||||
|
'slack-square',
|
||||||
|
'behance',
|
||||||
|
'behance-square',
|
||||||
|
'dribbble',
|
||||||
|
'dribbble-square',
|
||||||
|
'instagram',
|
||||||
|
'yuque',
|
||||||
|
]
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
icons,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
<cn>
|
||||||
|
#### 多色图标
|
||||||
|
可以通过设置 `theme` 属性为 `twoTone` 来渲染双色图标，并且可以设置主题色。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Two-tone icon and colorful icon
|
||||||
|
Specific them property `theme` to `twoTone` to render two-tone icons. You can also set the primary color.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<div class="icons-list">
|
||||||
|
<a-icon type="smile" theme="twoTone" />
|
||||||
|
<a-icon type="heart" theme="twoTone" twoToneColor="#eb2f96" />
|
||||||
|
<a-icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style scoped>
|
||||||
|
.icons-list >>> .anticon {
|
||||||
|
margin-right: 6px;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,4 +1,164 @@
|
||||||
import Icon from './icon'
|
|
||||||
|
import classNames from 'classnames'
|
||||||
|
import * as allIcons from '@ant-design/icons/lib/dist'
|
||||||
|
import VueIcon from '@ant-design/icons-vue'
|
||||||
|
import createFromIconfontCN from './IconFont'
|
||||||
|
import {
|
||||||
|
svgBaseProps, withThemeSuffix,
|
||||||
|
removeTypeTheme, getThemeFromTypeName,
|
||||||
|
alias,
|
||||||
|
} from './utils'
|
||||||
|
import warning from '../_util/warning'
|
||||||
|
import { getTwoToneColor, setTwoToneColor } from './twoTonePrimaryColor'
|
||||||
|
import { filterEmpty } from '../_util/props-util'
|
||||||
|
|
||||||
|
// Initial setting
|
||||||
|
VueIcon.add(...Object.keys(allIcons).map((key) => allIcons[key]))
|
||||||
|
setTwoToneColor('#1890ff')
|
||||||
|
const defaultTheme = 'outlined'
|
||||||
|
let dangerousTheme
|
||||||
|
|
||||||
|
// export interface CustomIconComponentProps {
|
||||||
|
// width: string | number;
|
||||||
|
// height: string | number;
|
||||||
|
// fill: string;
|
||||||
|
// viewBox?: string;
|
||||||
|
// className?: string;
|
||||||
|
// style?: React.CSSProperties;
|
||||||
|
// ['aria-hidden']?: string;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// export type ThemeType = 'filled' | 'outlined' | 'twoTone';
|
||||||
|
|
||||||
|
// export interface IconProps {
|
||||||
|
// type?: string;
|
||||||
|
// className?: string;
|
||||||
|
// theme?: ThemeType;
|
||||||
|
// title?: string;
|
||||||
|
// onClick?: React.MouseEventHandler<HTMLElement>;
|
||||||
|
// component?: React.ComponentType<CustomIconComponentProps>;
|
||||||
|
// twoToneColor?: string;
|
||||||
|
// viewBox?: string;
|
||||||
|
// spin?: boolean;
|
||||||
|
// style?: React.CSSProperties;
|
||||||
|
// prefixCls?: string;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// export interface IconComponent<P> extends React.SFC<P> {
|
||||||
|
// createFromIconfontCN: typeof createFromIconfontCN;
|
||||||
|
// getTwoToneColor: typeof getTwoToneColor;
|
||||||
|
// setTwoToneColor: typeof setTwoToneColor;
|
||||||
|
// unstable_ChangeThemeOfIconsDangerously?: typeof unstable_ChangeThemeOfIconsDangerously;
|
||||||
|
// unstable_ChangeDefaultThemeOfIcons?: typeof unstable_ChangeDefaultThemeOfIcons;
|
||||||
|
// }
|
||||||
|
|
||||||
|
const Icon = {
|
||||||
|
functional: true,
|
||||||
|
name: 'AIcon',
|
||||||
|
render (h, context) {
|
||||||
|
const { props, slots, listeners } = context
|
||||||
|
const {
|
||||||
|
// affect inner <svg>...</svg>
|
||||||
|
type,
|
||||||
|
component: Component,
|
||||||
|
viewBox,
|
||||||
|
spin,
|
||||||
|
// other
|
||||||
|
theme, // default to outlined
|
||||||
|
twoToneColor,
|
||||||
|
} = props
|
||||||
|
const slotsMap = slots()
|
||||||
|
let children = filterEmpty(slotsMap.default)
|
||||||
|
children = children.length === 0 ? undefined : children
|
||||||
|
warning(
|
||||||
|
Boolean(type || Component || children),
|
||||||
|
'Icon should have `type` prop or `component` prop or `children`.',
|
||||||
|
)
|
||||||
|
|
||||||
|
const classString = classNames({
|
||||||
|
[`anticon`]: true,
|
||||||
|
[`anticon-${type}`]: !!type,
|
||||||
|
})
|
||||||
|
|
||||||
|
const svgClassString = classNames({
|
||||||
|
[`anticon-spin`]: !!spin || type === 'loading',
|
||||||
|
})
|
||||||
|
|
||||||
|
let innerNode
|
||||||
|
|
||||||
|
// component > children > type
|
||||||
|
if (Component) {
|
||||||
|
const innerSvgProps = {
|
||||||
|
attrs: {
|
||||||
|
...svgBaseProps,
|
||||||
|
viewBox,
|
||||||
|
},
|
||||||
|
class: svgClassString,
|
||||||
|
}
|
||||||
|
if (!viewBox) {
|
||||||
|
delete innerSvgProps.attrs.viewBox
|
||||||
|
}
|
||||||
|
|
||||||
|
innerNode = (
|
||||||
|
<Component {...innerSvgProps} >
|
||||||
|
{children}
|
||||||
|
</Component>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
if (children) {
|
||||||
|
warning(
|
||||||
|
Boolean(viewBox) || (
|
||||||
|
children.length === 1 &&
|
||||||
|
children[0].tag === 'use'
|
||||||
|
),
|
||||||
|
'Make sure that you provide correct `viewBox`' +
|
||||||
|
' prop (default `0 0 1024 1024`) to the icon.',
|
||||||
|
)
|
||||||
|
const innerSvgProps = {
|
||||||
|
attrs: {
|
||||||
|
...svgBaseProps,
|
||||||
|
},
|
||||||
|
class: svgClassString,
|
||||||
|
}
|
||||||
|
innerNode = (
|
||||||
|
<svg {...innerSvgProps} viewBox={viewBox}>
|
||||||
|
{children}
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof type === 'string') {
|
||||||
|
let computedType = type
|
||||||
|
if (theme) {
|
||||||
|
const themeInName = getThemeFromTypeName(type)
|
||||||
|
warning(!themeInName || theme === themeInName,
|
||||||
|
`The icon name '${type}' already specify a theme '${themeInName}',` +
|
||||||
|
` the 'theme' prop '${theme}' will be ignored.`)
|
||||||
|
}
|
||||||
|
computedType = withThemeSuffix(
|
||||||
|
removeTypeTheme(alias(type)),
|
||||||
|
dangerousTheme || theme || defaultTheme,
|
||||||
|
)
|
||||||
|
innerNode = (
|
||||||
|
<VueIcon
|
||||||
|
class={svgClassString}
|
||||||
|
type={computedType}
|
||||||
|
primaryColor={twoToneColor}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<i {...{ on: listeners }} class={classString}>
|
||||||
|
{innerNode}
|
||||||
|
</i>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
Icon.createFromIconfontCN = createFromIconfontCN
|
||||||
|
Icon.getTwoToneColor = getTwoToneColor
|
||||||
|
Icon.setTwoToneColor = setTwoToneColor
|
||||||
|
|
||||||
/* istanbul ignore next */
|
/* istanbul ignore next */
|
||||||
Icon.install = function (Vue) {
|
Icon.install = function (Vue) {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
import VueIcon from '@ant-design/icons-vue'
|
||||||
|
|
||||||
|
export function setTwoToneColor (primaryColor) {
|
||||||
|
return VueIcon.setTwoToneColors({
|
||||||
|
primaryColor,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getTwoToneColor () {
|
||||||
|
const colors = VueIcon.getTwoToneColors()
|
||||||
|
return colors.primaryColor
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
import warning from '../_util/warning'
|
||||||
|
|
||||||
|
// These props make sure that the SVG behaviours like general text.
|
||||||
|
// Reference: https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
|
||||||
|
export const svgBaseProps = {
|
||||||
|
width: '1em',
|
||||||
|
height: '1em',
|
||||||
|
fill: 'currentColor',
|
||||||
|
'aria-hidden': 'true',
|
||||||
|
focusable: 'false',
|
||||||
|
}
|
||||||
|
|
||||||
|
const fillTester = /-fill$/
|
||||||
|
const outlineTester = /-o$/
|
||||||
|
const twoToneTester = /-twotone$/
|
||||||
|
|
||||||
|
export function getThemeFromTypeName (type) {
|
||||||
|
let result = null
|
||||||
|
if (fillTester.test(type)) {
|
||||||
|
result = 'filled'
|
||||||
|
} else if (outlineTester.test(type)) {
|
||||||
|
result = 'outlined'
|
||||||
|
} else if (twoToneTester.test(type)) {
|
||||||
|
result = 'twoTone'
|
||||||
|
}
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
|
||||||
|
export function removeTypeTheme (type) {
|
||||||
|
return type
|
||||||
|
.replace(fillTester, '')
|
||||||
|
.replace(outlineTester, '')
|
||||||
|
.replace(twoToneTester, '')
|
||||||
|
}
|
||||||
|
|
||||||
|
export function withThemeSuffix (type, theme) {
|
||||||
|
let result = type
|
||||||
|
if (theme === 'filled') {
|
||||||
|
result += '-fill'
|
||||||
|
} else if (theme === 'outlined') {
|
||||||
|
result += '-o'
|
||||||
|
} else if (theme === 'twoTone') {
|
||||||
|
result += '-twotone'
|
||||||
|
} else {
|
||||||
|
warning(false, `This icon '${type}' has unknown theme '${theme}'`)
|
||||||
|
}
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
|
||||||
|
// For alias or compatibility
|
||||||
|
export function alias (type) {
|
||||||
|
switch (type) {
|
||||||
|
case 'cross':
|
||||||
|
return 'close'
|
||||||
|
default:
|
||||||
|
}
|
||||||
|
return type
|
||||||
|
}
|
||||||
|
|
@ -156,6 +156,8 @@
|
||||||
"webpack-merge": "^4.1.1"
|
"webpack-merge": "^4.1.1"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@ant-design/icons": "^1.1.15",
|
||||||
|
"@ant-design/icons-vue": "^1.0.0",
|
||||||
"add-dom-event-listener": "^1.0.2",
|
"add-dom-event-listener": "^1.0.2",
|
||||||
"array-tree-filter": "^2.1.0",
|
"array-tree-filter": "^2.1.0",
|
||||||
"async-validator": "^1.8.2",
|
"async-validator": "^1.8.2",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue