diff --git a/.dumirc.ts b/.dumirc.ts index 4453e04..939bac3 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -19,6 +19,7 @@ export default defineConfig({ '@zhst/slave': path.join(__dirname, 'packages/slave/src'), '@zhst/material': path.join(__dirname, 'packages/material/src'), '@zhst/icon': path.join(__dirname, 'packages/icon/src'), + '@zhst/icon-v2': path.join(__dirname, 'packages/icon-v2/src'), '@zhst/map': path.join(__dirname, 'packages/map/src'), }, resolve: { @@ -34,11 +35,12 @@ export default defineConfig({ { type: 'slave', dir: 'packages/slave/src' }, { type: 'material', dir: 'packages/material/src' }, { type: 'icon', dir: 'packages/icon/src' }, + { type: 'icon-v2', dir: 'packages/icon-v2/src' }, { type: 'map', dir: 'packages/map/src' }, ], }, monorepoRedirect: { srcDir: ['packages', 'src'], peerDeps: true, - } + }, }); diff --git a/packages/icon-v2/.fatherrc.ts b/packages/icon-v2/.fatherrc.ts new file mode 100644 index 0000000..8b80f18 --- /dev/null +++ b/packages/icon-v2/.fatherrc.ts @@ -0,0 +1,20 @@ +import { defineConfig } from 'father-plugin-less'; + +export default defineConfig({ + // more father config: https://github.com/umijs/father/blob/master/docs/config.md + esm: { + output: 'es', + ignores: ['**/demo/*', 'src/**/demo/*'], + transformer: 'babel', + }, + cjs: { + output: 'lib', + ignores: ['**/demo/*', 'src/**/demo/*'], + transformer: 'babel', + }, + lessInBabel: { + modifyVars: { + }, + }, + plugins: ['father-plugin-less'], +}); diff --git a/packages/icon-v2/CHANGELOG.md b/packages/icon-v2/CHANGELOG.md new file mode 100644 index 0000000..0c565bc --- /dev/null +++ b/packages/icon-v2/CHANGELOG.md @@ -0,0 +1,7 @@ +# @zhst/icon-v2 + +## 0.7.0 + +### Minor Changes + +- 初始化 icon 包 diff --git a/packages/icon-v2/README.md b/packages/icon-v2/README.md new file mode 100644 index 0000000..5a95dec --- /dev/null +++ b/packages/icon-v2/README.md @@ -0,0 +1,16 @@ +# @zhst/icon + +## 介绍 + +静态变量库 + +## 安装 + +> pnpm install @zhst/icon-v2 + +## 使用 + +```js +import React from 'react'; +import { Iconfont } from '@zhst/icon-v2' +``` diff --git a/packages/icon-v2/package.json b/packages/icon-v2/package.json new file mode 100644 index 0000000..b2541bc --- /dev/null +++ b/packages/icon-v2/package.json @@ -0,0 +1,42 @@ +{ + "name": "@zhst/icon-v2", + "version": "0.7.0", + "description": "图标库", + "keywords": [ + "icon", + "zhst", + "图标库" + ], + "license": "ISC", + "author": "dev", + "sideEffects": [ + "dist/*", + "es/**/style/*", + "lib/**/style/*", + "*.less" + ], + "main": "lib/index.js", + "module": "es/index.js", + "typings": "es/index.d.ts", + "exports": { + ".": { + "require": "./lib/index.js", + "import": "./es/index.js", + "default": "./es/index.js" + } + }, + "files": [ + "es", + "lib" + ], + "scripts": { + "build": "father build" + }, + "publishConfig": { + "access": "public", + "registry": "http://10.0.0.77:4874" + }, + "dependencies": { + "@ant-design/icons": "^5.3.0" + } +} diff --git a/packages/icon-v2/src/Iconfont.tsx b/packages/icon-v2/src/Iconfont.tsx new file mode 100644 index 0000000..b41d026 --- /dev/null +++ b/packages/icon-v2/src/Iconfont.tsx @@ -0,0 +1,52 @@ +import { createFromIconfontCN } from '@ant-design/icons'; +import React from 'react'; +import { ReactNode } from 'react'; + +interface IconFontProps { + styles?: React.CSSProperties; + icon: string; + size?: number; + color?: string; + title?: string; + className?: string; + onIconClick?: (e: React.MouseEvent) => void; + children?: ReactNode; + active?: boolean; + disable?: boolean; +} +const Icon = createFromIconfontCN({ + scriptUrl: require('./font/iconfont.js'), +}); +const IconFont: React.FC = (props) => { + const { + title = '', + styles = {}, + icon, + size = 14, + onIconClick, + children, + active = false, + color = '', + disable = false + } = props || {}; + return ( + { + onIconClick && onIconClick(e); + }} + disabled={disable} + style={{ + ...styles, + cursor: 'pointer', + fontSize: size, + color, + ...(active ? { color: '#09f' } : {}), + }} + type={`icon-${icon}`} + > + {children} + + ); +}; +export default IconFont; diff --git a/packages/icon-v2/src/demo/basic.tsx b/packages/icon-v2/src/demo/basic.tsx new file mode 100644 index 0000000..2cd8909 --- /dev/null +++ b/packages/icon-v2/src/demo/basic.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { IconFont } from '@zhst/icon-v2'; + +const demo = () => { + + return ( +
+ +
+ ); +}; + +export default demo; diff --git a/packages/icon-v2/src/demo/demo.tsx b/packages/icon-v2/src/demo/demo.tsx new file mode 100644 index 0000000..37550e7 --- /dev/null +++ b/packages/icon-v2/src/demo/demo.tsx @@ -0,0 +1,65 @@ +import React, { useState } from 'react'; +const iconJson = require('../font/iconfont.json') +import { IconFont } from '@zhst/icon-v2'; +import './index.less'; +import { Button, Input, message } from '@zhst/meta'; +import { SearchOutlined } from '@ant-design/icons'; +const demo = () => { + const totalIconArr = iconJson['glyphs']; + const [iconArr, setIconArr] = useState(totalIconArr); + + const search = (searchVal: string) => { + if (!search) { + setIconArr(totalIconArr); + } else { + setIconArr(totalIconArr.filter((item) => item.name.toLowerCase().includes(searchVal.toLowerCase()))); + } + }; + + async function copyTextToClipboard(textToCopy: string, successMessage?: string): Promise { + try { + // 使用现代API尝试复制 + await navigator.clipboard.writeText(textToCopy); + message.success(successMessage) + } catch (error) { + // 如果浏览器不支持或者用户拒绝了权限，可以考虑降级处理 + // 但在这个示例中，我们直接捕获异常并记录日志 + message.error('复制失败') + } + } + + return ( +
+
+ } onChange={(e) => search(e.target.value)}> +
+
    + {iconArr.map((item: any) => { + const { name } = item; + const newName = name.replace(/\s+/g, "-"); + return
  • +
    + + +
    {newName}
    +
    +
    +
    + + +
    +
    +
    • + })} +
+
+ ); +} +export default demo \ No newline at end of file diff --git a/packages/icon-v2/src/demo/index.less b/packages/icon-v2/src/demo/index.less new file mode 100644 index 0000000..f66547e --- /dev/null +++ b/packages/icon-v2/src/demo/index.less @@ -0,0 +1,70 @@ +.demo { + &-ul { + list-style-type: none; + display: flex; + flex-wrap: wrap; + } + + &-li { + height: 150px; + width: 150px; + box-sizing: border-box; + padding: 10px; + margin: 10px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + + &-content { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + &-name { + color: #666; + font-size: 12px; + } + } + + &-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: linear-gradient(315deg, #6772FF 0, #00F9E5 100%); /* 渐变背景 */ + border-radius: 6px; + display: flex; + justify-content: center; + align-items: center; + transition: opacity 0.3s ease; /* 动画过渡 */ + opacity: 0; /* 默认隐藏 */ + pointer-events: none; /* 默认不可操作 */ + } + + &-overlay-content { + text-align: center; + color: white; + padding: 20px; + + button { + margin-bottom: 10px; + background-color: transparent; + border: 1px solid #fff; + color: #fff; + } + } + } + + .hidden { + visibility: hidden; /* 额外的隐藏样式，可根据需要调整 */ + } + + &-li:hover .demo-li-overlay { + opacity: 1; + pointer-events: auto; /* 可操作 */ + } +} \ No newline at end of file diff --git a/packages/icon-v2/src/font/iconfont.css b/packages/icon-v2/src/font/iconfont.css new file mode 100644 index 0000000..c0581ac --- /dev/null +++ b/packages/icon-v2/src/font/iconfont.css @@ -0,0 +1,428 @@ +@font-face { + font-family: iconfont; /* Project id 4558008 */ + src: url('iconfont.woff2?t=1719027564460') format('woff2'), + url('iconfont.woff?t=1719027564460') format('woff'), + url('iconfont.ttf?t=1719027564460') format('truetype'), + url('iconfont.svg?t=1719027564460#iconfont') format('svg'); +} + +.iconfont { + font-family: iconfont !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-folder::before { + content: "\e666"; +} + +.icon-full-screen::before { + content: "\e667"; +} + +.icon-AI::before { + content: "\e668"; +} + +.icon-day::before { + content: "\e669"; +} + +.icon-pause::before { + content: "\e66a"; +} + +.icon-night::before { + content: "\e66b"; +} + +.icon-play::before { + content: "\e66c"; +} + +.icon-picture::before { + content: "\e66d"; +} + +.icon-full-screen-exit::before { + content: "\e66e"; +} + +.icon-folder-filled::before { + content: "\e66f"; +} + +.icon-analysis-sel::before { + content: "\e665"; +} + +.icon-diagnose::before { + content: "\e663"; +} + +.icon-analysis::before { + content: "\e664"; +} + +.icon-success-filled::before { + content: "\e65b"; +} + +.icon-error-filled::before { + content: "\e65c"; +} + +.icon-failure-filled::before { + content: "\e65d"; +} + +.icon-stop-filled::before { + content: "\e65e"; +} + +.icon-warning-filled::before { + content: "\e65f"; +} + +.icon-infomation-filled::before { + content: "\e660"; +} + +.icon-frame::before { + content: "\e661"; +} + +.icon-camera2::before { + content: "\e662"; +} + +.icon-sort-decrease::before { + content: "\e659"; +} + +.icon-camera-filled::before { + content: "\e65a"; +} + +.icon-digicam::before { + content: "\e652"; +} + +.icon-route-filled::before { + content: "\e653"; +} + +.icon-reset::before { + content: "\e654"; +} + +.icon-download::before { + content: "\e655"; +} + +.icon-sort-increase::before { + content: "\e656"; +} + +.icon-route::before { + content: "\e657"; +} + +.icon-camera::before { + content: "\e658"; +} + +.icon-model-sel::before { + content: "\e64d"; +} + +.icon-dispatch-sel::before { + content: "\e64e"; +} + +.icon-car-sel::before { + content: "\e64f"; +} + +.icon-bike-sel::before { + content: "\e650"; +} + +.icon-identify-sel::before { + content: "\e651"; +} + +.icon-track-sel::before { + content: "\e646"; +} + +.icon-retrieval-sel::before { + content: "\e647"; +} + +.icon-notice-sel::before { + content: "\e648"; +} + +.icon-personnel-sel::before { + content: "\e649"; +} + +.icon-files-sel::before { + content: "\e64a"; +} + +.icon-recall-sel::before { + content: "\e64b"; +} + +.icon-offline-sel::before { + content: "\e64c"; +} + +.icon-retrieval::before { + content: "\e644"; +} + +.icon-personnel::before { + content: "\e645"; +} + +.icon-show::before { + content: "\e641"; +} + +.icon-import::before { + content: "\e642"; +} + +.icon-export::before { + content: "\e643"; +} + +.icon-turn-on::before { + content: "\e63c"; +} + +.icon-zoom-off::before { + content: "\e63d"; +} + +.icon-zoom-in::before { + content: "\e63e"; +} + +.icon-hide::before { + content: "\e63f"; +} + +.icon-turn-off::before { + content: "\e640"; +} + +.icon-arrow-up::before { + content: "\e639"; +} + +.icon-arrow-down::before { + content: "\e63a"; +} + +.icon-arrow-left::before { + content: "\e63b"; +} + +.icon-arrow-right::before { + content: "\e638"; +} + +.icon-track::before { + content: "\e62a"; +} + +.icon-user::before { + content: "\e62b"; +} + +.icon-browser::before { + content: "\e62c"; +} + +.icon-notice::before { + content: "\e62d"; +} + +.icon-dispatch::before { + content: "\e62e"; +} + +.icon-recall::before { + content: "\e62f"; +} + +.icon-offline::before { + content: "\e630"; +} + +.icon-model::before { + content: "\e631"; +} + +.icon-target::before { + content: "\e632"; +} + +.icon-car::before { + content: "\e633"; +} + +.icon-identify::before { + content: "\e634"; +} + +.icon-files::before { + content: "\e635"; +} + +.icon-guide::before { + content: "\e636"; +} + +.icon-bike::before { + content: "\e637"; +} + +.icon-keeping::before { + content: "\e625"; +} + +.icon-calendar::before { + content: "\e626"; +} + +.icon-manage::before { + content: "\e627"; +} + +.icon-save::before { + content: "\e628"; +} + +.icon-back::before { + content: "\e629"; +} + +.icon-briefcase::before { + content: "\e624"; +} + +.icon-version::before { + content: "\e61d"; +} + +.icon-time-mould::before { + content: "\e61e"; +} + +.icon-exchange::before { + content: "\e61f"; +} + +.icon-document::before { + content: "\e620"; +} + +.icon-history::before { + content: "\e621"; +} + +.icon-trend::before { + content: "\e622"; +} + +.icon-structure::before { + content: "\e623"; +} + +.icon-filter::before { + content: "\e612"; +} + +.icon-location::before { + content: "\e613"; +} + +.icon-system::before { + content: "\e614"; +} + +.icon-video::before { + content: "\e615"; +} + +.icon-message::before { + content: "\e616"; +} + +.icon-list::before { + content: "\e617"; +} + +.icon-mail::before { + content: "\e618"; +} + +.icon-report::before { + content: "\e619"; +} + +.icon-edit::before { + content: "\e61a"; +} + +.icon-delete::before { + content: "\e61b"; +} + +.icon-add-video::before { + content: "\e61c"; +} + +.icon-setting::before { + content: "\e60a"; +} + +.icon-refresh::before { + content: "\e609"; +} + +.icon-view::before { + content: "\e60c"; +} + +.icon-search::before { + content: "\e60d"; +} + +.icon-homepage::before { + content: "\e60e"; +} + +.icon-close::before { + content: "\e60f"; +} + +.icon-help::before { + content: "\e610"; +} + +.icon-add::before { + content: "\e611"; +} + +.icon-time::before { + content: "\e60b"; +} + diff --git a/packages/icon-v2/src/font/iconfont.js b/packages/icon-v2/src/font/iconfont.js new file mode 100644 index 0000000..8c7c94c --- /dev/null +++ b/packages/icon-v2/src/font/iconfont.js @@ -0,0 +1 @@ +window._iconfont_svg_string_4558008='',function(h){var a=(a=document.getElementsByTagName("script"))[a.length-1],l=a.getAttribute("data-injectcss"),a=a.getAttribute("data-disable-injectsvg");if(!a){var o,m,i,z,v,t=function(a,l){l.parentNode.insertBefore(a,l)};if(l&&!h.__iconfont__svg__cssinject__){h.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(a){console&&console.log(a)}}o=function(){var a,l=document.createElement("div");l.innerHTML=h._iconfont_svg_string_4558008,(l=l.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",l=l,(a=document.body).firstChild?t(l,a.firstChild):a.appendChild(l))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(o,0):(m=function(){document.removeEventListener("DOMContentLoaded",m,!1),o()},document.addEventListener("DOMContentLoaded",m,!1)):document.attachEvent&&(i=o,z=h.document,v=!1,s(),z.onreadystatechange=function(){"complete"==z.readyState&&(z.onreadystatechange=null,e())})}function e(){v||(v=!0,i())}function s(){try{z.documentElement.doScroll("left")}catch(a){return void setTimeout(s,50)}e()}}(window); \ No newline at end of file diff --git a/packages/icon-v2/src/font/iconfont.json b/packages/icon-v2/src/font/iconfont.json new file mode 100644 index 0000000..67bb6aa --- /dev/null +++ b/packages/icon-v2/src/font/iconfont.json @@ -0,0 +1,730 @@ +{ + "id": "4558008", + "name": "智慧视通图标库", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "2.0 版本", + "glyphs": [ + { + "icon_id": "40653527", + "name": "folder", + "font_class": "folder", + "unicode": "e666", + "unicode_decimal": 58982 + }, + { + "icon_id": "40653528", + "name": "full-screen", + "font_class": "full-screen", + "unicode": "e667", + "unicode_decimal": 58983 + }, + { + "icon_id": "40653525", + "name": "AI", + "font_class": "AI", + "unicode": "e668", + "unicode_decimal": 58984 + }, + { + "icon_id": "40653526", + "name": "day", + "font_class": "day", + "unicode": "e669", + "unicode_decimal": 58985 + }, + { + "icon_id": "40653521", + "name": "pause", + "font_class": "pause", + "unicode": "e66a", + "unicode_decimal": 58986 + }, + { + "icon_id": "40653524", + "name": "night", + "font_class": "night", + "unicode": "e66b", + "unicode_decimal": 58987 + }, + { + "icon_id": "40653522", + "name": "play", + "font_class": "play", + "unicode": "e66c", + "unicode_decimal": 58988 + }, + { + "icon_id": "40653523", + "name": "picture", + "font_class": "picture", + "unicode": "e66d", + "unicode_decimal": 58989 + }, + { + "icon_id": "40653520", + "name": "full-screen-exit", + "font_class": "full-screen-exit", + "unicode": "e66e", + "unicode_decimal": 58990 + }, + { + "icon_id": "40653519", + "name": "folder-filled", + "font_class": "folder-filled", + "unicode": "e66f", + "unicode_decimal": 58991 + }, + { + "icon_id": "40530615", + "name": "analysis-sel", + "font_class": "analysis-sel", + "unicode": "e665", + "unicode_decimal": 58981 + }, + { + "icon_id": "40530395", + "name": "diagnose", + "font_class": "diagnose", + "unicode": "e663", + "unicode_decimal": 58979 + }, + { + "icon_id": "40530396", + "name": "analysis", + "font_class": "analysis", + "unicode": "e664", + "unicode_decimal": 58980 + }, + { + "icon_id": "40530403", + "name": "success-filled", + "font_class": "success-filled", + "unicode": "e65b", + "unicode_decimal": 58971 + }, + { + "icon_id": "40530402", + "name": "error-filled", + "font_class": "error-filled", + "unicode": "e65c", + "unicode_decimal": 58972 + }, + { + "icon_id": "40530401", + "name": "failure-filled", + "font_class": "failure-filled", + "unicode": "e65d", + "unicode_decimal": 58973 + }, + { + "icon_id": "40530398", + "name": "stop-filled", + "font_class": "stop-filled", + "unicode": "e65e", + "unicode_decimal": 58974 + }, + { + "icon_id": "40530400", + "name": "warning-filled", + "font_class": "warning-filled", + "unicode": "e65f", + "unicode_decimal": 58975 + }, + { + "icon_id": "40530399", + "name": "infomation-filled", + "font_class": "infomation-filled", + "unicode": "e660", + "unicode_decimal": 58976 + }, + { + "icon_id": "40530397", + "name": "frame", + "font_class": "frame", + "unicode": "e661", + "unicode_decimal": 58977 + }, + { + "icon_id": "40530393", + "name": "camera2", + "font_class": "camera2", + "unicode": "e662", + "unicode_decimal": 58978 + }, + { + "icon_id": "40501768", + "name": "sort-decrease", + "font_class": "sort-decrease", + "unicode": "e659", + "unicode_decimal": 58969 + }, + { + "icon_id": "40501766", + "name": "camera-filled", + "font_class": "camera-filled", + "unicode": "e65a", + "unicode_decimal": 58970 + }, + { + "icon_id": "40501771", + "name": "digicam", + "font_class": "digicam", + "unicode": "e652", + "unicode_decimal": 58962 + }, + { + "icon_id": "40501774", + "name": "route-filled", + "font_class": "route-filled", + "unicode": "e653", + "unicode_decimal": 58963 + }, + { + "icon_id": "40501773", + "name": "reset", + "font_class": "reset", + "unicode": "e654", + "unicode_decimal": 58964 + }, + { + "icon_id": "40501772", + "name": "download", + "font_class": "download", + "unicode": "e655", + "unicode_decimal": 58965 + }, + { + "icon_id": "40501770", + "name": "sort-increase", + "font_class": "sort-increase", + "unicode": "e656", + "unicode_decimal": 58966 + }, + { + "icon_id": "40501769", + "name": "route", + "font_class": "route", + "unicode": "e657", + "unicode_decimal": 58967 + }, + { + "icon_id": "40501767", + "name": "camera", + "font_class": "camera", + "unicode": "e658", + "unicode_decimal": 58968 + }, + { + "icon_id": "40441349", + "name": "model-sel", + "font_class": "model-sel", + "unicode": "e64d", + "unicode_decimal": 58957 + }, + { + "icon_id": "40441348", + "name": "dispatch-sel", + "font_class": "dispatch-sel", + "unicode": "e64e", + "unicode_decimal": 58958 + }, + { + "icon_id": "40441347", + "name": "car-sel", + "font_class": "car-sel", + "unicode": "e64f", + "unicode_decimal": 58959 + }, + { + "icon_id": "40441345", + "name": "bike-sel", + "font_class": "bike-sel", + "unicode": "e650", + "unicode_decimal": 58960 + }, + { + "icon_id": "40441346", + "name": "identify-sel", + "font_class": "identify-sel", + "unicode": "e651", + "unicode_decimal": 58961 + }, + { + "icon_id": "40441355", + "name": "track-sel", + "font_class": "track-sel", + "unicode": "e646", + "unicode_decimal": 58950 + }, + { + "icon_id": "40441356", + "name": "retrieval-sel", + "font_class": "retrieval-sel", + "unicode": "e647", + "unicode_decimal": 58951 + }, + { + "icon_id": "40441351", + "name": "notice-sel", + "font_class": "notice-sel", + "unicode": "e648", + "unicode_decimal": 58952 + }, + { + "icon_id": "40441354", + "name": "personnel-sel", + "font_class": "personnel-sel", + "unicode": "e649", + "unicode_decimal": 58953 + }, + { + "icon_id": "40441350", + "name": "files-sel", + "font_class": "files-sel", + "unicode": "e64a", + "unicode_decimal": 58954 + }, + { + "icon_id": "40441353", + "name": "recall-sel", + "font_class": "recall-sel", + "unicode": "e64b", + "unicode_decimal": 58955 + }, + { + "icon_id": "40441352", + "name": "offline-sel", + "font_class": "offline-sel", + "unicode": "e64c", + "unicode_decimal": 58956 + }, + { + "icon_id": "40441255", + "name": "retrieval", + "font_class": "retrieval", + "unicode": "e644", + "unicode_decimal": 58948 + }, + { + "icon_id": "40441254", + "name": "personnel", + "font_class": "personnel", + "unicode": "e645", + "unicode_decimal": 58949 + }, + { + "icon_id": "40440757", + "name": "show", + "font_class": "show", + "unicode": "e641", + "unicode_decimal": 58945 + }, + { + "icon_id": "40440756", + "name": "import", + "font_class": "import", + "unicode": "e642", + "unicode_decimal": 58946 + }, + { + "icon_id": "40440755", + "name": "export", + "font_class": "export", + "unicode": "e643", + "unicode_decimal": 58947 + }, + { + "icon_id": "40440762", + "name": "turn on", + "font_class": "turn-on", + "unicode": "e63c", + "unicode_decimal": 58940 + }, + { + "icon_id": "40440760", + "name": "zoom off", + "font_class": "zoom-off", + "unicode": "e63d", + "unicode_decimal": 58941 + }, + { + "icon_id": "40440761", + "name": "zoom in", + "font_class": "zoom-in", + "unicode": "e63e", + "unicode_decimal": 58942 + }, + { + "icon_id": "40440758", + "name": "hide", + "font_class": "hide", + "unicode": "e63f", + "unicode_decimal": 58943 + }, + { + "icon_id": "40440759", + "name": "turn off", + "font_class": "turn-off", + "unicode": "e640", + "unicode_decimal": 58944 + }, + { + "icon_id": "40440733", + "name": "arrow-up", + "font_class": "arrow-up", + "unicode": "e639", + "unicode_decimal": 58937 + }, + { + "icon_id": "40440731", + "name": "arrow-down", + "font_class": "arrow-down", + "unicode": "e63a", + "unicode_decimal": 58938 + }, + { + "icon_id": "40440732", + "name": "arrow-left", + "font_class": "arrow-left", + "unicode": "e63b", + "unicode_decimal": 58939 + }, + { + "icon_id": "40440734", + "name": "arrow-right", + "font_class": "arrow-right", + "unicode": "e638", + "unicode_decimal": 58936 + }, + { + "icon_id": "40440672", + "name": "track", + "font_class": "track", + "unicode": "e62a", + "unicode_decimal": 58922 + }, + { + "icon_id": "40440671", + "name": "user", + "font_class": "user", + "unicode": "e62b", + "unicode_decimal": 58923 + }, + { + "icon_id": "40440670", + "name": "browser", + "font_class": "browser", + "unicode": "e62c", + "unicode_decimal": 58924 + }, + { + "icon_id": "40440668", + "name": "notice", + "font_class": "notice", + "unicode": "e62d", + "unicode_decimal": 58925 + }, + { + "icon_id": "40440669", + "name": "dispatch", + "font_class": "dispatch", + "unicode": "e62e", + "unicode_decimal": 58926 + }, + { + "icon_id": "40440667", + "name": "recall", + "font_class": "recall", + "unicode": "e62f", + "unicode_decimal": 58927 + }, + { + "icon_id": "40440666", + "name": "offline", + "font_class": "offline", + "unicode": "e630", + "unicode_decimal": 58928 + }, + { + "icon_id": "40440665", + "name": "model", + "font_class": "model", + "unicode": "e631", + "unicode_decimal": 58929 + }, + { + "icon_id": "40440664", + "name": "target", + "font_class": "target", + "unicode": "e632", + "unicode_decimal": 58930 + }, + { + "icon_id": "40440663", + "name": "car", + "font_class": "car", + "unicode": "e633", + "unicode_decimal": 58931 + }, + { + "icon_id": "40440661", + "name": "identify", + "font_class": "identify", + "unicode": "e634", + "unicode_decimal": 58932 + }, + { + "icon_id": "40440662", + "name": "files", + "font_class": "files", + "unicode": "e635", + "unicode_decimal": 58933 + }, + { + "icon_id": "40440660", + "name": "guide", + "font_class": "guide", + "unicode": "e636", + "unicode_decimal": 58934 + }, + { + "icon_id": "40440659", + "name": "bike", + "font_class": "bike", + "unicode": "e637", + "unicode_decimal": 58935 + }, + { + "icon_id": "40440686", + "name": "keeping", + "font_class": "keeping", + "unicode": "e625", + "unicode_decimal": 58917 + }, + { + "icon_id": "40440684", + "name": "calendar", + "font_class": "calendar", + "unicode": "e626", + "unicode_decimal": 58918 + }, + { + "icon_id": "40440685", + "name": "manage", + "font_class": "manage", + "unicode": "e627", + "unicode_decimal": 58919 + }, + { + "icon_id": "40440683", + "name": "save", + "font_class": "save", + "unicode": "e628", + "unicode_decimal": 58920 + }, + { + "icon_id": "40440682", + "name": "back", + "font_class": "back", + "unicode": "e629", + "unicode_decimal": 58921 + }, + { + "icon_id": "40440636", + "name": "briefcase", + "font_class": "briefcase", + "unicode": "e624", + "unicode_decimal": 58916 + }, + { + "icon_id": "40440643", + "name": "version", + "font_class": "version", + "unicode": "e61d", + "unicode_decimal": 58909 + }, + { + "icon_id": "40440642", + "name": "time mould", + "font_class": "time-mould", + "unicode": "e61e", + "unicode_decimal": 58910 + }, + { + "icon_id": "40440641", + "name": "exchange", + "font_class": "exchange", + "unicode": "e61f", + "unicode_decimal": 58911 + }, + { + "icon_id": "40440637", + "name": "document", + "font_class": "document", + "unicode": "e620", + "unicode_decimal": 58912 + }, + { + "icon_id": "40440640", + "name": "history", + "font_class": "history", + "unicode": "e621", + "unicode_decimal": 58913 + }, + { + "icon_id": "40440638", + "name": "trend", + "font_class": "trend", + "unicode": "e622", + "unicode_decimal": 58914 + }, + { + "icon_id": "40440639", + "name": "structure", + "font_class": "structure", + "unicode": "e623", + "unicode_decimal": 58915 + }, + { + "icon_id": "40440404", + "name": "filter", + "font_class": "filter", + "unicode": "e612", + "unicode_decimal": 58898 + }, + { + "icon_id": "40440402", + "name": "location", + "font_class": "location", + "unicode": "e613", + "unicode_decimal": 58899 + }, + { + "icon_id": "40440403", + "name": "system", + "font_class": "system", + "unicode": "e614", + "unicode_decimal": 58900 + }, + { + "icon_id": "40440401", + "name": "video", + "font_class": "video", + "unicode": "e615", + "unicode_decimal": 58901 + }, + { + "icon_id": "40440400", + "name": "message", + "font_class": "message", + "unicode": "e616", + "unicode_decimal": 58902 + }, + { + "icon_id": "40440396", + "name": "list", + "font_class": "list", + "unicode": "e617", + "unicode_decimal": 58903 + }, + { + "icon_id": "40440398", + "name": "mail", + "font_class": "mail", + "unicode": "e618", + "unicode_decimal": 58904 + }, + { + "icon_id": "40440399", + "name": "report", + "font_class": "report", + "unicode": "e619", + "unicode_decimal": 58905 + }, + { + "icon_id": "40440397", + "name": "edit", + "font_class": "edit", + "unicode": "e61a", + "unicode_decimal": 58906 + }, + { + "icon_id": "40440395", + "name": "delete", + "font_class": "delete", + "unicode": "e61b", + "unicode_decimal": 58907 + }, + { + "icon_id": "40440394", + "name": "add video", + "font_class": "add-video", + "unicode": "e61c", + "unicode_decimal": 58908 + }, + { + "icon_id": "40440153", + "name": "setting", + "font_class": "setting", + "unicode": "e60a", + "unicode_decimal": 58890 + }, + { + "icon_id": "40440152", + "name": "refresh", + "font_class": "refresh", + "unicode": "e609", + "unicode_decimal": 58889 + }, + { + "icon_id": "40440151", + "name": "view", + "font_class": "view", + "unicode": "e60c", + "unicode_decimal": 58892 + }, + { + "icon_id": "40440150", + "name": "search", + "font_class": "search", + "unicode": "e60d", + "unicode_decimal": 58893 + }, + { + "icon_id": "40440149", + "name": "homepage", + "font_class": "homepage", + "unicode": "e60e", + "unicode_decimal": 58894 + }, + { + "icon_id": "40440147", + "name": "close", + "font_class": "close", + "unicode": "e60f", + "unicode_decimal": 58895 + }, + { + "icon_id": "40440148", + "name": "help", + "font_class": "help", + "unicode": "e610", + "unicode_decimal": 58896 + }, + { + "icon_id": "40440146", + "name": "add", + "font_class": "add", + "unicode": "e611", + "unicode_decimal": 58897 + }, + { + "icon_id": "40440154", + "name": "time", + "font_class": "time", + "unicode": "e60b", + "unicode_decimal": 58891 + } + ] +} diff --git a/packages/icon-v2/src/font/iconfont.svg b/packages/icon-v2/src/font/iconfont.svg new file mode 100644 index 0000000..fcc6941 --- /dev/null +++ b/packages/icon-v2/src/font/iconfont.svg @@ -0,0 +1,225 @@ + + + + Created by iconfont + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/icon-v2/src/font/iconfont.ttf b/packages/icon-v2/src/font/iconfont.ttf new file mode 100644 index 0000000..ace22e7 Binary files /dev/null and b/packages/icon-v2/src/font/iconfont.ttf differ diff --git a/packages/icon-v2/src/font/iconfont.woff b/packages/icon-v2/src/font/iconfont.woff new file mode 100644 index 0000000..cbf3219 Binary files /dev/null and b/packages/icon-v2/src/font/iconfont.woff differ diff --git a/packages/icon-v2/src/font/iconfont.woff2 b/packages/icon-v2/src/font/iconfont.woff2 new file mode 100644 index 0000000..cb17ce4 Binary files /dev/null and b/packages/icon-v2/src/font/iconfont.woff2 differ diff --git a/packages/icon-v2/src/index.less b/packages/icon-v2/src/index.less new file mode 100644 index 0000000..23f5dce --- /dev/null +++ b/packages/icon-v2/src/index.less @@ -0,0 +1,3 @@ +.icon:hover { + color: #6accca !important; +} diff --git a/packages/icon-v2/src/index.md b/packages/icon-v2/src/index.md new file mode 100644 index 0000000..625dd9f --- /dev/null +++ b/packages/icon-v2/src/index.md @@ -0,0 +1,22 @@ +--- +nav: + title: Icon-v2 +order: 1 +toc: content +title: 快速上手 +--- + + + +基本用法 +icon列表 +## API + +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| title | 标题 | string | '' | - | +| styles | 样式 | cssProperties | {} | - | +| icon | fontClass名 | string | '' | - | +| size | fontClass名 | integer | 14 | - | +| onIconClick | icon点击事件 | function | ()=>{} | - | +| color | 图标颜色 | string | '' | - | \ No newline at end of file diff --git a/packages/icon-v2/src/index.ts b/packages/icon-v2/src/index.ts new file mode 100644 index 0000000..f9fa9f3 --- /dev/null +++ b/packages/icon-v2/src/index.ts @@ -0,0 +1 @@ +export { default as IconFont } from './Iconfont'; diff --git a/packages/icon/src/demo/demo.tsx b/packages/icon/src/demo/demo.tsx index f415dd7..c1c523f 100644 --- a/packages/icon/src/demo/demo.tsx +++ b/packages/icon/src/demo/demo.tsx @@ -1,14 +1,28 @@ -import React from 'react'; +import React, { useState } from 'react'; const iconJson = require('../font/iconfont.json') import { IconFont } from '@zhst/icon'; import './index.less'; -import { message } from '@zhst/meta'; -const demo = ()=>{ - const iconArr = iconJson['glyphs'] +import { Input, message } from '@zhst/meta'; +import { SearchOutlined } from '@ant-design/icons'; +const demo = () => { + const totalIconArr = iconJson['glyphs']; + const [iconArr, setIconArr] = useState(totalIconArr); + + const search = (searchVal: string) => { + if (!search) { + setIconArr(totalIconArr); + } else { + setIconArr(totalIconArr.filter((item) => item.name.toLowerCase().includes(searchVal.toLowerCase()))); + } + }; + return (
+
+ } onChange={(e) => search(e.target.value)}> +
    - {iconArr.map((item: any)=>{ + {iconArr.map((item: any)=>{ const {font_class,name}= item; const fontName = `icon-${font_class}` return