diff --git a/site/blog/app/components/Icons/index.tsx b/site/blog/app/components/Icons/index.tsx deleted file mode 100644 index 9a5f96d..0000000 --- a/site/blog/app/components/Icons/index.tsx +++ /dev/null @@ -1,77 +0,0 @@ -"use client"; -import { Icon, addIcon } from "@iconify/react"; -export { Icon }; - -addIcon("antdmobile", { - body: ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - `, - width: 200, - height: 200, -}); - -addIcon("wagmi", { - body: ``, - width: 421, - height: 198, -}); - -addIcon("antv", { - body: ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - `, - width: 32, - height: 28, -}); diff --git a/site/blog/app/constant/projects.ts b/site/blog/app/constant/projects.ts index 953c0ab..0a43c0a 100644 --- a/site/blog/app/constant/projects.ts +++ b/site/blog/app/constant/projects.ts @@ -3,7 +3,7 @@ export default [ key: "MEET48", name: "MEET48", labels: ["react", "wagmi"], - icons: ["ri:reactjs-fill", "wagmi"], + icons: ["i-logos:react", "i-logos:wagmi"], desc: "海外偶像总选网站应用,基于WEB3.0实现。包钱包登录、投票、积分赚取、兑换等功能。", href: "https://meet.qhan.wang", date: "202306", @@ -12,21 +12,21 @@ export default [ key: "202204", name: "智能制度解析", labels: ["react", "antd", "antv"], - icons: ["ri:reactjs-fill", "ant-design:ant-design-outlined", "antv"], + icons: ["i-logos:react", "i-logos:antd", "i-logos:antv"], desc: "关注于银行金融方面规章制度的自动解析与分析,便于相关人员快速掌握规章制度。提供对制度的导入、解析、分词、标注、核对、图谱生成、对比等方面的支持。", }, { key: "202210", name: "事中监控平台", labels: ["react", "antd", "antv"], - icons: ["ri:reactjs-fill", "ant-design:ant-design-outlined", "antv"], + icons: ["i-logos:react", "i-logos:antd", "i-logos:antv"], desc: "针对金融机构提供对各类金融活动产生的的事件进行监控管理降低业务风险。提供针对事件的预警管理、案件管理,以及黑白名单、规则引挚、策略包、数据看盘等方面功能。", }, { key: "health-questionnaire", name: "公共卫生事件调查问卷", labels: ["react", "antd-mobile"], - icons: ["ri:reactjs-fill", "antdmobile"], + icons: ["i-logos:react", "i-logos:antd-mobile"], desc: "四川省应对重大突发公共卫生事件公众认知及行为调查问卷。", href: "https://health.qhan.wang", date: "202102", @@ -36,46 +36,42 @@ export default [ key: "1", name: "鲁班系统", labels: ["react", "electron", "nodejs"], - icons: ["ri:reactjs-fill", "mdi:electron-framework", "mdi:nodejs"], + icons: ["i-logos:react", "i-logos:electron", "i-logos:nodejs"], desc: "包含桌面端与WEB端,定位于关注精细化运营、高效运营支撑。主要支撑课程顾问、班主任老师对客户转化、社群运营的诉求,协助一线老师完成销售、运营目标。", }, { key: "2", name: "工单系统", labels: ["react", "antd", "antd-mobile"], - icons: ["ri:reactjs-fill", "ant-design:ant-design-outlined", "antdmobile"], + icons: ["i-logos:react", "i-logos:antd", "i-logos:antd-mobile"], desc: "包含WEB端、H5(微信客户端、钉钉管理端)。主要为解决公司内部业务上需要通过工单的方式进行流转的工作流程,降低在使用三方记录工具与人力占用的成本。", }, { key: "3", name: "基础权限平台", labels: ["react", "antd", "qiankun"], - icons: [ - "ri:reactjs-fill", - "ant-design:ant-design-outlined", - "ant-design:ant-design-outlined", - ], + icons: ["i-logos:react", "i-logos:antd", "i-logos:qiankun"], desc: "微前端架构,内部中台系统、三方应用、员工部门及权限相关管理系统。", }, { key: "4", name: "仿真镜像平台", labels: ["react", "antd"], - icons: ["ri:reactjs-fill", "ant-design:ant-design-outlined"], + icons: ["i-logos:react", "i-logos:antd"], desc: "用于克隆线上产品(如淘宝、天猫)环境的真实数据后,在镜像环境中能引流更多流量做更多真实的验证,包括核对监控等。", }, { key: "5", name: "倍事达管理系统", labels: ["react", "antd"], - icons: ["ri:reactjs-fill", "ant-design:ant-design-outlined"], + icons: ["i-logos:react", "i-logos:antd"], desc: "一个PCO有害生物防治行业SaaS软件系统,主要服务于食品行业、连锁餐厅等PCO虫控企业用户。", }, { key: "6", name: "幼学空间", labels: ["react", "antd", "antd-mobile"], - icons: ["ri:reactjs-fill", "ant-design:ant-design-outlined", "antdmobile"], + icons: ["i-logos:react", "i-logos:antd", "i-logos:antd-mobile"], desc: "一个集资源组织、专家、园长、后台管理及移动H5五个端所组成的中大型项目。主要用于管理幼儿教师资格认证、培训、幼儿教育、教育资源维护等功能。", }, { @@ -83,21 +79,21 @@ export default [ name: "青少年毒品预防教育平台", url: "http://www.jxjd627.com", labels: ["jquery", "requirejs"], - icons: ["mdi:jquery", "logos:require"], + icons: ["i-logos:jquery", "i-logos:requirejs"], desc: "针对青少年毒品知识的宣传与教育,加强青少年对毒品危害的认识。其方式有文章、视频、及毒品知识测试。", }, { key: "8", name: "营养健康专家端管理应用", labels: ["react", "redux", "sass"], - icons: ["ri:reactjs-fill", "bxl:redux", "ion:logo-sass"], + icons: ["i-logos:react", "i-logos:redux", "i-logos:sass"], desc: "用于营养专家对客户咨询支持以前专家对营养资讯及食谱和关注者的管理。", }, { key: "9", name: "DSP广告投放平台", labels: ["angular", "echarts"], - icons: ["mdi:angularjs", "simple-icons:apacheecharts"], + icons: ["i-logos:angular", "i-logos:echarts"], desc: "用于广告投放管理包括了分时、资源、媒体、受众等报表以及创意、订单、用户等子系统,容括了广告投放等系列功能,便于使用者全面掌握当前自己的所有情况。", }, ]; diff --git a/site/blog/app/page.tsx b/site/blog/app/page.tsx index ea7115b..43c1427 100644 --- a/site/blog/app/page.tsx +++ b/site/blog/app/page.tsx @@ -1,4 +1,3 @@ -import { Icon } from "@/app/components/Icons"; import Footer from "@/app/components/Footer"; import AdmLink from "./Home/AdmLink"; @@ -51,16 +50,16 @@ export default function Home() { {proj.icons?.map((c, i) => ( - ))} diff --git a/site/blog/package.json b/site/blog/package.json index f5ef361..b2c8bba 100644 --- a/site/blog/package.json +++ b/site/blog/package.json @@ -11,7 +11,6 @@ }, "dependencies": { "@headlessui/react": "^1.7.17", - "@iconify/react": "^4.1.1", "clsx": "^2.0.0", "dayjs": "^1.11.9", "gray-matter": "^4.0.3", diff --git a/site/blog/pnpm-lock.yaml b/site/blog/pnpm-lock.yaml index c02f81e..cb931f9 100644 --- a/site/blog/pnpm-lock.yaml +++ b/site/blog/pnpm-lock.yaml @@ -8,9 +8,6 @@ dependencies: '@headlessui/react': specifier: ^1.7.17 version: 1.7.17(react-dom@18.2.0)(react@18.2.0) - '@iconify/react': - specifier: ^4.1.1 - version: 4.1.1(react@18.2.0) clsx: specifier: ^2.0.0 version: 2.0.0 @@ -389,17 +386,9 @@ packages: '@iconify/types': 2.0.0 dev: true - /@iconify/react@4.1.1(react@18.2.0): - resolution: {integrity: sha512-jed14EjvKjee8mc0eoscGxlg7mSQRkwQG3iX3cPBCO7UlOjz0DtlvTqxqEcHUJGh+z1VJ31Yhu5B9PxfO0zbdg==} - peerDependencies: - react: '>=16' - dependencies: - '@iconify/types': 2.0.0 - react: 18.2.0 - dev: false - /@iconify/types@2.0.0: resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==} + dev: true /@iconify/utils@2.1.9: resolution: {integrity: sha512-mo+A4n3MwLlWlg1SoSO+Dt6pOPWKElk9sSJ6ZpuzbB9OcjxN8RUWxU3ulPwB1nglErWKRam2x4BAohbYF7FiFA==} diff --git a/site/blog/uno.config.icons.ts b/site/blog/uno.config.icons.ts new file mode 100644 index 0000000..3cb0e3d --- /dev/null +++ b/site/blog/uno.config.icons.ts @@ -0,0 +1,90 @@ +import { IconsOptions } from "unocss/preset-icons"; + +const logos: IconsOptions["collections"] = { + logos: { + "antd-mobile": ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + `, + + wagmi: + '', + antv: ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + `, + + // simple-icons:echarts + echarts: ``, + // logos:requirejs + requirejs: ``, + // mdi:jquery + jquery: ``, + // mdi:angularjs + angular: ``, + // ion:logo-sass + sass: ``, + // bxl:redux + redux: ``, + // ri:reactjs-fill + react: ``, + // ant-design:ant-design-outlined + antd: ``, + // mdi:electron-framework + electron: ``, + // mdi:nodejs + nodejs: ``, + }, +}; + +export default logos; diff --git a/site/blog/uno.config.ts b/site/blog/uno.config.ts index d0f29a9..28dd902 100644 --- a/site/blog/uno.config.ts +++ b/site/blog/uno.config.ts @@ -6,6 +6,8 @@ import { presetTypography, } from "unocss"; +import icons from "./uno.config.icons"; + export default defineConfig({ presets: [ presetAttributify(), @@ -15,6 +17,7 @@ export default defineConfig({ display: "inline-block", "vertical-align": "-.125em", }, + collections: icons, }), presetTypography({ cssExtend: {