From 8c91e3696eb7a54b1a59c6688c199391941dcd80 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Tue, 27 Nov 2018 18:25:38 +0800 Subject: [PATCH] feat: update icon --- components/icon/demo/custom.md | 4 +- components/icon/demo/iconfont.md | 6 +- components/icon/demo/index.vue | 66 ++++----- components/icon/index.en-US.md | 126 +++++++++++++++++- components/icon/index.js | 45 ++----- components/icon/index.zh-CN.md | 122 ++++++++++++++++- package.json | 1 + site/components/header.vue | 1 + site/components/layout.vue | 2 +- site/index.js | 14 ++ site/theme/en-US.js | 106 +++++++++++++++ site/theme/static/icons.less | 25 +++- site/theme/template/IconDisplay/Category.jsx | 50 +++++++ .../template/IconDisplay/CopyableIcon.vue | 30 +++++ site/theme/template/IconDisplay/fields.js | 99 ++++++++++++++ site/theme/template/IconDisplay/index.jsx | 110 +++++++++++++++ .../theme/template/IconDisplay/themeIcons.jsx | 47 +++++++ site/theme/zh-CN.js | 106 +++++++++++++++ 18 files changed, 858 insertions(+), 102 deletions(-) create mode 100644 site/theme/en-US.js create mode 100644 site/theme/template/IconDisplay/Category.jsx create mode 100644 site/theme/template/IconDisplay/CopyableIcon.vue create mode 100644 site/theme/template/IconDisplay/fields.js create mode 100644 site/theme/template/IconDisplay/index.jsx create mode 100644 site/theme/template/IconDisplay/themeIcons.jsx create mode 100644 site/theme/zh-CN.js diff --git a/components/icon/demo/custom.md b/components/icon/demo/custom.md index 8b1f3eab7..517a3602b 100644 --- a/components/icon/demo/custom.md +++ b/components/icon/demo/custom.md @@ -4,8 +4,8 @@ -#### Basic -Create a reusable Vue component by using ``. The property `component` takes a Vue component that renders to `svg` element. +#### Custom Icon +Create a reusable Vue component by using ``. The property `component` takes a Vue component that renders to `svg` element. ```html diff --git a/components/icon/demo/iconfont.md b/components/icon/demo/iconfont.md index 229b552e5..3cc37af2e 100644 --- a/components/icon/demo/iconfont.md +++ b/components/icon/demo/iconfont.md @@ -11,9 +11,9 @@ If you are using [iconfont.cn](http://iconfont.cn/), you can use the icons in yo ```html + diff --git a/site/theme/template/IconDisplay/fields.js b/site/theme/template/IconDisplay/fields.js new file mode 100644 index 000000000..1500b4fd3 --- /dev/null +++ b/site/theme/template/IconDisplay/fields.js @@ -0,0 +1,99 @@ +export const categories = { + direction: [ + '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', + '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', + 'up-square', 'down-square', 'left-square', 'right-square', + 'login', 'logout', 'menu-fold', 'menu-unfold', + 'border-bottom', 'border-horizontal', 'border-inner', + 'border-outter', 'border-left', 'border-right', 'border-top', + 'border-verticle', 'pic-center', 'pic-left', 'pic-right', + 'radius-bottomleft', 'radius-bottomright', 'radius-upleft', + 'fullscreen', 'fullscreen-exit', + ], + suggestion: [ + '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', + ], + edit: [ + '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', 'colum-width', + 'dash', 'small-dash', 'sort-ascending', 'sort-descending', + 'drag', 'ordered-list', 'radius-setting', + ], + data: [ + 'area-chart', 'pie-chart', 'bar-chart', 'dot-chart', 'line-chart', + 'radar-chart', 'heat-map', 'fall', 'rise', 'stock', 'box-plot', 'fund', + 'sliders', + ], + other: [ + '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', 'batch-folding', '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', + ], + logo: [ + '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', 'code-sandbox', 'code-sandbox-circle', + 'amazon', 'google', 'codepen-circle', 'alipay', 'ant-design', + 'aliyun', 'zhihu', 'slack', 'slack-square', 'behance', + 'behance-square', 'dribbble', 'dribbble-square', + 'instagram', 'yuque', + 'alibaba', 'yahoo', + ], +} diff --git a/site/theme/template/IconDisplay/index.jsx b/site/theme/template/IconDisplay/index.jsx new file mode 100644 index 000000000..de3e1b8d5 --- /dev/null +++ b/site/theme/template/IconDisplay/index.jsx @@ -0,0 +1,110 @@ +import manifest from '@ant-design/icons/lib/manifest' +import Category from './Category' +import { FilledIcon, OutlinedIcon, TwoToneIcon } from './themeIcons' +import { categories } from './fields' + +const IconDisplay = { + cagetories: categories, + newIconNames: [ + // direction + 'border-bottom', 'border-horizontal', 'border-inner', + 'border-outter', 'border-left', 'border-right', 'border-top', + 'border-verticle', 'pic-center', 'pic-left', 'pic-right', + 'radius-bottomleft', 'radius-bottomright', 'radius-upleft', 'radius-upleft', + 'fullscreen', 'fullscreen-exit', + // suggestion + 'issues-close', 'stop', + + // edit + 'scissor', 'snippets', 'diff', 'highlight', + 'align-center', 'align-left', 'align-right', 'bg-colors', + 'bold', 'italic', 'underline', 'redo', 'undo', 'zoom-in', 'zoom-out', + 'font-colors', 'font-size', 'line-height', 'colum-height', 'colum-width', + 'dash', 'small-dash', 'sort-ascending', 'sort-descending', + 'drag', 'ordered-list', 'radius-setting', + + // data + 'radar-chart', 'heat-map', 'fall', 'rise', 'stock', 'box-plot', 'fund', + 'sliders', + + // other + 'alert', 'audit', 'batch-folding', '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', + 'strikethrough', 'shopping', + + // logo + 'alibaba', 'yahoo', + ], + + themeTypeMapper: { + filled: 'fill', + outlined: 'outline', + twoTone: 'twotone', + }, + data () { + return { + theme: 'outlined', + } + }, + methods: { + getComputedDisplayList () { + return Object.keys(IconDisplay.cagetories) + .map( + (category) => ({ + category, + icons: IconDisplay.cagetories[category] + .filter((name) => manifest[IconDisplay.themeTypeMapper[this.theme]].indexOf(name) !== -1), + }), + ) + .filter(({ icons }) => Boolean(icons.length)) + }, + + handleChangeTheme (e) { + this.theme = e.target.value + }, + + renderCategories (list) { + return list.map(({ category, icons }) => { + return ( + + ) + }) + }, + }, + + render () { + const list = this.getComputedDisplayList() + const message = this.$t('message') + return ( +
+

{message['app.docs.components.icon.pick-theme']}

+ + + {message['app.docs.components.icon.outlined']} + + + {message['app.docs.components.icon.filled']} + + + {message['app.docs.components.icon.two-tone']} + + + {this.renderCategories(list)} +
+ ) + }, +} + +export default IconDisplay diff --git a/site/theme/template/IconDisplay/themeIcons.jsx b/site/theme/template/IconDisplay/themeIcons.jsx new file mode 100644 index 000000000..c65ade3f7 --- /dev/null +++ b/site/theme/template/IconDisplay/themeIcons.jsx @@ -0,0 +1,47 @@ +export const FilledIcon = { + render () { + const path = 'M864 64H160C107 64 64 107 64 160v' + + '704c0 53 43 96 96 96h704c53 0 96-43 96-96V16' + + '0c0-53-43-96-96-96z' + return ( + + + + ) + }, +} + +export const OutlinedIcon = { + render () { + const path = 'M864 64H160C107 64 64 107 64 160v7' + + '04c0 53 43 96 96 96h704c53 0 96-43 96-96V160c' + + '0-53-43-96-96-96z m-12 800H172c-6.6 0-12-5.4-' + + '12-12V172c0-6.6 5.4-12 12-12h680c6.6 0 12 5.4' + + ' 12 12v680c0 6.6-5.4 12-12 12z' + return ( + + + + ) + }, +} + +export const TwoToneIcon = { + render () { + const path = 'M16 512c0 273.932 222.066 496 496 49' + + '6s496-222.068 496-496S785.932 16 512 16 16 238.' + + '066 16 512z m496 368V144c203.41 0 368 164.622 3' + + '68 368 0 203.41-164.622 368-368 368z' + return ( + + + + ) + }, +} diff --git a/site/theme/zh-CN.js b/site/theme/zh-CN.js new file mode 100644 index 000000000..4181811cf --- /dev/null +++ b/site/theme/zh-CN.js @@ -0,0 +1,106 @@ +module.exports = { + locale: 'zh-CN', + messages: { + 'app.header.search': '全文本搜索...', + 'app.header.menu.home': '首页', + 'app.header.menu.practice': '实践', + 'app.header.menu.pattern': '模式', + 'app.header.menu.components': '组件', + 'app.header.menu.spec': '设计语言', + 'app.header.menu.resource': '资源', + 'app.header.menu.mobile': '移动版', + 'app.header.menu.pro': 'PRO', + 'app.header.lang': 'English', + 'app.content.edit-page': '在 Github 上编辑此页！', + 'app.content.edit-demo': '在 Github 上编辑此示例！', + 'app.component.examples': '代码演示', + 'app.component.examples.expand': '展开全部代码', + 'app.component.examples.collpse': '收起全部代码', + 'app.demo.copy': '复制代码', + 'app.demo.copied': '复制成功', + 'app.demo.codepen': '在 CodePen 中打开', + 'app.demo.codesandbox': '在 CodeSandbox 中打开', + 'app.demo.riddle': '在 Riddle 中打开', + 'app.home.slogan': '一个 UI 设计语言', + 'app.home.introduce': '服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。', + 'app.home.design-language': '设计语言', + 'app.home.solution': '解决方案', + 'app.home.components-explain': '基于 Ant Design 设计语言，我们提供了开箱即用的高质量 React 和 Angular 组件实现，用于开发和服务于企业级中后台产品。', + 'app.home.product-pro-slogan': '开箱即用的中台前端/设计解决方案', + 'app.home.product-mobile-slogan': 'antd-mobile 是 Ant Design 移动规范的实现', + 'app.home.product-antv-slogan': '简单、专业、拥有无限可能的数据可视化解决方案', + 'app.home.product-landing-slogan': '基于 Ant Design 设计语言的 Landing 模板与规范', + 'app.home.tool-title': '工具和资源', + 'app.home.tool-package-title': 'Ant Design 资源包', + 'app.home.tool-package-content': 'Ant Design 相关设计资源下载', + 'app.home.tool-library-title': 'Axure Library', + 'app.home.tool-library-content': '一套精美得像视觉稿的 Axure 组件库', + 'app.home.tool-kitchen-title': 'Kitchen', + 'app.home.tool-kitchen-content': '一个为设计师提效的 Sketch 工具集', + 'app.home.getting-started': '开始使用', + 'app.home.more': '查看更多', + 'app.home.more-mobile-react': 'Ant Design Mobile of React', + 'app.home.more-mobile-angular': 'Ant Design Mobile of Angular', + 'app.footer.repo': 'GitHub 仓库', + 'app.footer.awesome': 'Awesome Ant Design', + 'app.footer.course': 'Ant Design 实战教程', + 'app.footer.chinamirror': '国内镜像站点 ��', + 'app.footer.primary-color-changed': '修改主题色成功！', + 'app.footer.kitchen': 'Sketch 工具集', + 'app.footer.landing': 'Landing 模板集', + 'app.footer.scaffold': '脚手架', + 'app.footer.scaffolds': '脚手架市场', + 'app.footer.dev-tools': '开发工具', + 'app.footer.umi': 'React 应用开发框架', + 'app.footer.dva': '数据流前端框架', + 'app.footer.resources': '相关资源', + 'app.footer.data-vis': '数据可视化', + 'app.footer.eggjs': '企业级 Node 开发框架', + 'app.footer.motion': '设计动效', + 'app.footer.antd-library': 'Axure 部件库', + 'app.footer.design-resources': '设计资源下载', + 'app.footer.antux': '页面逻辑素材', + 'app.footer.community': '社区', + 'app.footer.help': '帮助', + 'app.footer.change-log': '更新日志', + 'app.footer.faq': '常见问题', + 'app.footer.feedback': '反馈和建议', + 'app.footer.stackoverflow': 'StackOverflow', + 'app.footer.segmentfault': 'SegmentFault', + 'app.footer.discuss-en': '在线讨论 (English)', + 'app.footer.discuss-cn': '在线讨论 (中文)', + 'app.footer.bug-report': '报告 Bug', + 'app.footer.issues': '讨论列表', + 'app.footer.version': '文档版本：', + 'app.footer.author': '蚂蚁金服体验技术部出品 @ AFX', + 'app.footer.work_with_us': '加入我们', + 'app.footer.more-product': '更多产品', + 'app.footer.company': 'AFX', + 'app.footer.ant-design': '蚂蚁 UI 体系', + 'app.footer.yuque': '语雀', + 'app.footer.yuque.slogan': '知识创作与分享工具', + 'app.footer.fengdie': '云凤蝶', + 'app.footer.fengdie.slogan': '移动建站平台', + 'app.footer.zhihu': 'Ant Design 专栏', + 'app.footer.zhihu.xtech': '体验科技专栏', + 'app.footer.seeconf': '蚂蚁体验科技大会', + 'app.footer.xtech': '蚂蚁体验科技', + 'app.footer.xtech.slogan': '让用户体验美好', + 'app.publish.title': 'antd@3.0.0 发布！� � �', + 'app.publish.greeting': '你好，', + 'app.publish.intro': ' 已正式发布，欢迎升级。', + 'app.publish.old-version-guide': '如果您还需要使用旧版，请查阅 ', + 'app.publish.old-version-tips': '，也可通过页面右上角的文档版本选择框进行切换。', + 'app.docs.color.pick-primary': '选择你的主色', + 'app.docs.components.icon.pick-theme': '选择图标主题风格', + 'app.docs.components.icon.outlined': '线框风格', + 'app.docs.components.icon.filled': '实底风格', + 'app.docs.components.icon.two-tone': '双色风格', + 'app.docs.components.icon.category.direction': '方向性图标', + 'app.docs.components.icon.category.suggestion': '提示建议性图标', + 'app.docs.components.icon.category.edit': '编辑类图标', + 'app.docs.components.icon.category.data': '数据类图标', + 'app.docs.components.icon.category.other': '网站通用图标', + 'app.docs.components.icon.category.logo': '品牌和标识', + }, +}