在开发中很多时候会用到图标这些东西,尤其是在菜单部分会有一个菜单图标的选项,一般为了保证这个图标在图标库中是存在的,会让用户直接选择而不是手动填写,因为在多次开发中都遇到了这个于是将其代码抽离出来,便于直接复用
IconModal.js
import React,
{ PureComponent
} from
'react';
import {
Icon,
Input,
Button,
Modal,
Tabs,
Tooltip
} from
'antd';
import classNames from
'classnames';
import { SettingOutlined
} from
'@ant-design/icons';
import styles from
'./index.less'
const
{ TabPane
} = Tabs
;
const directionIcons
= ['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',
'vertical-left',
'vertical-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',
'border-bottom',
'border-horizontal',
'border-inner',
'border-left',
'border-right',
'border-top',
'border-verticle',
'pic-center',
'pic-left',
'pic-right',
'radius-bottomleft',
'radius-bottomright',
'radius-upleft',
'radius-upright',
'fullscreen',
'fullscreen-exit']
const suggestionIcons
= ['question',
'question-circle',
'plus',
'plus-circle',
'pause',
'pause-circle',
'minus',
'minus-circle',
'plus-square',
'minus-square',
'info',
'info-circle',
'exclamation',
'exclamation-circle',
'close',
'close-circle',
'close-square',
'check',
'check-circle',
'check-square',
'clock-circle',
'warning',
'issues-close',
'stop']
const editIcons
= ['edit',
'form',
'copy',
'scissor',
'delete',
'snippets',
'diff',
'highlight',
'align-center',
'align-left',
'align-right',
'bg-colors',
'bold',
'italic',
'underline',
'strikethrough',
'redo',
'undo',
'zoom-in',
'zoom-out',
'font-colors',
'font-size',
'line-height',
'colum-height',
'dash',
'small-dash',
'sort-ascending',
'sort-descending',
'drag',
'ordered-list',
'radius-setting']
const dataIcons
= ['area-chart',
'pie-chart',
'bar-chart',
'dot-chart',
'line-chart',
'radar-chart',
'heat-map',
'fall',
'rise',
'stock',
'box-plot',
'fund',
'sliders']
const webIcons
= ['lock',
'unlock',
'bars',
'book',
'calendar',
'cloud',
'cloud-download',
'code',
'copy',
'credit-card',
'delete',
'desktop',
'download',
'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',
'meh',
'smile',
'inbox',
'laptop',
'appstore',
'link',
'mail',
'mobile',
'notification',
'paper-clip',
'picture',
'poweroff',
'reload',
'search',
'setting',
'share-alt',
'shopping-cart',
'tablet',
'tag',
'tags',
'to-top',
'upload',
'user',
'video-camera',
'home',
'loading',
'loading-3-quarters',
'cloud-upload',
'star',
'heart',
'environment',
'eye',
'camera',
'save',
'team',
'solution',
'phone',
'filter',
'exception',
'export',
'customer-service',
'qrcode',
'scan',
'like',
'dislike',
'message',
'pay-circle',
'calculator',
'pushpin',
'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',
'table',
'profile',
'alert',
'audit',
'branches',
'build',
'border',
'crown',
'experiment',
'fire',
'money-collect',
'property-safety',
'read',
'reconciliation',
'rest',
'security-scan',
'insurance',
'interation',
'safety-certificate',
'project',
'thunderbolt',
'block',
'cluster',
'deployment-unit',
'dollar',
'euro',
'pound',
'file-done',
'file-exclamation',
'file-protect',
'file-search',
'file-sync',
'gateway',
'gold',
'robot',
'shopping']
const logoIcons
= ['android',
'apple',
'windows',
'ie',
'chrome',
'github',
'aliwangwang',
'dingding',
'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',
'alibaba',
'yahoo']
export default class IconModal extends PureComponent
{
state
= {
}
render
(){
const
{visible ,handleOk,handleCancel,form,selectIcon,selecteditem
} = this.props
;
return
(
<Modal
title
="图标选择"
visible
={visible
}
width
='800px'
onOk
={handleOk
}
onCancel
={handleCancel
}
>
<Tabs defaultActiveKey
="1" >
<TabPane tab
="方向性图标" key
="1" >
{directionIcons.map
((item
)=>{
return <Tooltip title
={item
} text key
={item
}><Icon type
={item
} className
={classNames
(styles.icon,
{[styles.selectedicon
]:item
===selecteditem
})} onClick
= {()=>{selectIcon
(item
)}}/
></Tooltip
>
})}
</TabPane
>
<TabPane tab
="指示性图标" key
="2">
{suggestionIcons.map
((item
)=>{
return <Tooltip title
={item
} text key
={item
}><Icon type
={item
} className
={classNames
(styles.icon,
{[styles.selectedicon
]:item
===selecteditem
})} onClick
= {()=>{selectIcon
(item
)}}/
></Tooltip
>
})}
</TabPane
>
<TabPane tab
="编辑类图标" key
="3">
{editIcons.map
((item
)=>{
return <Tooltip title
={item
} text key
={item
}><Icon type
={item
} className
={classNames
(styles.icon,
{[styles.selectedicon
]:item
===selecteditem
})} onClick
= {()=>{selectIcon
(item
)}}/
></Tooltip
>
})}
</TabPane
>
<TabPane tab
="数据类图标" key
="4" >
{dataIcons.map
((item
)=>{
return <Tooltip title
={item
} text key
={item
}><Icon type
={item
} className
={classNames
(styles.icon,
{[styles.selectedicon
]:item
===selecteditem
})} onClick
= {()=>{selectIcon
(item
)}}/
></Tooltip
>
})}
</TabPane
>
<TabPane tab
="网站通用图标" key
="5">
{webIcons.map
((item
)=>{
return <Tooltip title
={item
} text key
={item
}><Icon type
={item
} className
={classNames
(styles.icon,
{[styles.selectedicon
]:item
===selecteditem
})} onClick
= {()=>{selectIcon
(item
)}}/
></Tooltip
>
})}
</TabPane
>
<TabPane tab
="品牌和标识" key
="6">
{logoIcons.map
((item
)=>{
return <Tooltip title
={item
} text key
={item
}><Icon type
={item
} className
={classNames
(styles.icon,
{[styles.selectedicon
]:item
===selecteditem
})} onClick
= {()=>{selectIcon
(item
)}}/
></Tooltip
>
})}
</TabPane
>
</Tabs
>
</Modal
>
)
}
}
index.less
.icon
{
width: 40px
;
height: 40px
;
font-size: 20px
;
line-height: 40px
;
text-align: center
;
}
.icon:hover
{
cursor: pointer
;
background:
color: honeydew
;
border-radius: 5px
;
}
.selectedicon
{
background:
color: honeydew
;
border-radius: 5px
;
}
另:此模块使用部分在Glory Fast项目中,点击查看github
