【generate】如何维护一套icon组件库,直接输出svg为react component

https://github.com/ant-design/ant-design-web3/pull/761/files
实现了icon-preview(通过jsdoc, 鼠标放在组件上可以看到icon的样式),因为打包方式、产物以及命名上有一些不同,可能需要稍加改造。

这个同步脚本应该后续也用得上,略加改造同步 svg 可以提高后续添加 svg 的效率直接拖入图片就可以转成组件代码,降低cv和命名心智。
在这里插入图片描述

  1. 在package.json中设置命令可以直接执行ts脚本
"icons:generate": "NODE_OPTIONS='--experimental-specifier-resolution=node' node --loader ts-node/esm ./packages/icons/scripts/generate.ts"
  1. 通过 mport * as allIconDefs from '@ant-design/web3-icons' 获取所有组件,使用camelToKebab函数转换需要符合自己命名需求的组件
    在这里插入图片描述
  2. 通过 template 设置render模版
import pkg from 'lodash';
const { template } = pkg;

全部代码

import * as fs from 'fs';
import * as path from 'path';
import { promisify } from 'util';
import * as allIconDefs from '@ant-design/web3-icons';
import pkg from 'lodash';

const __dirname = new URL(import.meta.url).pathname;
const { template } = pkg;

const writeFile = promisify(fs.writeFile);

interface IconDefinition {
  [key: string]: any;
}
interface IconDefinitionWithIdentifier extends IconDefinition {
  svgIdentifier: string;
  svgBase64: string | null;
}

function camelToKebab(camelCaseString: string) {
  return camelCaseString
    .replace(/([a-z\d])([A-Z][a-z\d])|([A-Z]+(?![a-z\d]))/g, '$1$3-$2')
    .toLowerCase();
}

function detectRealPath(_path: string) {
  try {
    return fs.existsSync(_path) ? _path : null;
  } catch (e) {
    return null;
  }
}

function svg2base64(svgPath: string, size = 50) {
  const svg = fs.readFileSync(svgPath, 'utf-8');
  const svgWithStyle = svg.replace(/<svg/, `<svg width="${size}" height="${size}" fill="#cacaca"`);

  const base64 = Buffer.from(svgWithStyle).toString('base64');
  return `data:image/svg+xml;base64,${base64}`;
}

function walk<T>(fn: (iconDef: IconDefinitionWithIdentifier) => Promise<T>) {
  return Promise.all(
    Object.keys(allIconDefs).map((svgIdentifier) => {
      const iconDef = (allIconDefs as { [id: string]: IconDefinition })[svgIdentifier];
      const svgPathToKebab = camelToKebab(svgIdentifier);
      const realSvgPath = detectRealPath(
        path.resolve(__dirname, `../../src/svgs/${svgPathToKebab}.svg`),
      );

      let svgBase64: string | null = null;

      if (realSvgPath) {
        try {
          svgBase64 = svg2base64(realSvgPath);
        } catch (e) {}
      }
      return fn({ svgIdentifier, svgBase64, svgPathToKebab, ...iconDef });
    }),
  );
}

async function generateIcons() {
  const iconsDir = path.join(__dirname, '../../src/svgs');

  try {
    await promisify(fs.access)(iconsDir);
  } catch (err) {
    await promisify(fs.mkdir)(iconsDir);
  }

  const render = template(
    `
// GENERATE BY ./scripts/generate.ts
// DON NOT EDIT IT MANUALLY
import * as React from 'react';
import AntdIcon from '@ant-design/icons';
import { type IconBaseProps } from '@ant-design/icons/lib/components/Icon';
import { ConfigProvider } from 'antd';
import classnames from 'classnames';

import SVGComponent from '../svgs/<%= svgPathToKebab %>.svg';

<% if (svgBase64) { %> /**![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=%3C%25%3D%20svgBase64%20%25%3E&pos_id=img-c6iaG6Dw-1712112320363) */ <% } %>
export const <%= svgIdentifier %> = React.forwardRef<HTMLSpanElement, IconBaseProps>((props, ref) => {
  const { getPrefixCls } = React.useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('web3-icon-<%= svgPathToKebab %>');

  return (
    <AntdIcon
      {...props}
      className={classnames(prefixCls, props.className)}
      ref={ref}
      component={SVGComponent}
    />
  );
});

<%= svgIdentifier %>.displayName = '<%= svgIdentifier %>';

`.trim(),
  );

  await walk(async (item) => {
    // generate icon file
    const svgPathToKebab = camelToKebab(item.svgIdentifier);

    try {
      await writeFile(
        path.resolve(__dirname, `../../src/components/${svgPathToKebab}.tsx`),
        render(item),
      );
    } catch (error) {}
  });

  // generate icon index
  const entryText = Object.keys(allIconDefs)
    .sort()
    .map((svgIdentifier) => `export * from './components/${camelToKebab(svgIdentifier)}';`)
    .join('\n');

  await promisify(fs.appendFile)(
    path.resolve(__dirname, '../../src/index.ts'),
    `
  // GENERATE BY ./scripts/generate.ts
  // DON NOT EDIT IT MANUALLY

  ${entryText}
      `.trim(),
  );
}

generateIcons();

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/514303.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

git分支-基本分支与合并

问题假设 让我们通过一个简单的分支和合并的例子&#xff0c;演示在实际工作中可能会使用的工作流程。将按照以下步骤进行&#xff1a; 在网站上进行一些工作。为正在开发的新用户故事创建一个分支。在该分支上进行一些工作。 在这个阶段&#xff0c;我们可能会接到一个电话…

原型链污染攻击也称JavaScript Prototype 污染攻击

JavaScript数据类型 let和var关键字的区别 使用var或let关键字可以定义变量 let和var的区别如下&#xff1a; var是全局作用域&#xff0c;let 只在当前代码块内有效 当在代码块外访问let声明的变量时会报错 var有变量提升&#xff0c;let没有变量提升 let必须先声明…

U-net在乳腺癌医学图像分割方面的应用

图像几何变换和生成对抗网络 通过旋转、反转、剪切图像对乳腺医学图像进行数据增强之后&#xff0c;可以提高模型的准确性。但是当前简单的分割和几何变换在医疗图像数据中不会简单使用&#xff0c;而是会集合生成对抗网络&#xff08;GAN&#xff09;结合使用。使用生成对抗网…

zookeeper监听集群节点的实现zkclient组件实现方案(Java版)

ZooKeeper Watcher 机制 client 向zookeeper 注册监听client注册的同时会存储一个WatchManager对象向zookeeper发生改变则notification client 并发送一个WatchManager对象,然后client再更新该对象 package com.jacky.zk.demo;import org.I0Itec.zkclient.IZkChildListener;…

https访问http的minio 图片展示不出来

问题描述&#xff1a;请求到的图片地址单独访问能显示&#xff0c;但是在网页中展示不出来 原因&#xff1a;https中直接访问http是不行的&#xff0c;需要用nginx再转发一下 nginx配置如下&#xff08;注意&#xff1a;9000是minio默认端口&#xff0c;已经占用&#xff0c;…

基于Spring Boot的餐厅点餐系统

基于Spring Boot的餐厅点餐系统 开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;Maven3.3.9 部分系统展示 管理员登录界面 用户注册登录界面 …

MySQL-视图:视图概述、创建、查看、更新、修改、删除

第14章 视图 1. 常见的数据库对象2. 视图概述2.1 为什么使用视图&#xff1f;2.2 视图的理解 3. 创建视图3.1 创建单表视图3.2 创建多表联合视图3.3 基于视图创建视图 4. 查看视图5. 更新视图的数据5.1 一般情况5.2 不可更新的视图 6. 修改、删除视图6.1 修改视图6.2 删除视图 …

uniapp微信小程序真机图片不显示

不同设备可能出现部分设备显示不了图片&#xff0c;解决办法&#xff1a;图片地址直接使用&#xff0c;不要拼接&#xff1a; https://images.weserv.nl/?urlhttp

hive 慢sql 查询

hive 慢sql 查询 查找 hive 执行日志存储路径&#xff08;一般是 hive-audit.log &#xff09; 比如&#xff1a;/var/log/Bigdata/audit/hive/hiveserver/hive-audit.log 解析日志 获取 执行时间 执行 OperationId 执行人 UserNameroot 执行sql 数据分隔符为 \001 并写入 hiv…

【Java】:继承

目录 1.为什么需要继承 2.继承的概念 3.继承的语法 4.父类成员访问 4.1子类和父类不存在同名成员变量 1.子类和父类不存在同名成员变量 2.子类和父类成员变量同名 4.2子类中访问父类的成员方法 1.成员方法名字不同 2.成员方法名字相同 5.super关键字 6.子类构造方法 …

使用Flutter创建带有图标提示的TextField

在移动应用开发中&#xff0c;TextField是一种常用的用户输入小部件。然而&#xff0c;有时向用户提供有关他们应该输入什么的提示或说明是很有帮助的。在本教程中&#xff0c;我们将创建一个Flutter应用程序&#xff0c;演示如何在TextField旁边包含一个图标提示。 编写代码 …

WPS二次开发系列:如何获取应用签名SHA256值

在申请WPS SDK授权版时候需要开发者提供应用包名和签名&#xff0c;应用包名好说&#xff0c;那如何生成符合WPS要求的应用签名&#xff08;SHA256)呢&#xff0c;经笔者亲测&#xff0c;有如下两种方式可以实现获取第三方应用签名值&#xff08;SHA256&#xff09; 1. 方法一&…

Day43 动态规划 part05

Day43 动态规划 part05 1049.最后一块石头的重量II 我的思路: 提示说和划分两个和相等的子集差不多&#xff0c;猛然想到&#xff0c;这道题不就是划分子集&#xff0c;用sum - 和最大*2 代码就是划分和相同的子集的变形 解答&#xff1a; class Solution {public int last…

一站式指南:Flutter应用如何顺利登陆苹果App Store

引言 &#x1f680; Flutter作为一种跨平台的移动应用程序开发框架&#xff0c;为开发者提供了便利&#xff0c;使他们能够通过单一的代码库构建出高性能、高保真度的应用程序&#xff0c;同时支持Android和iOS两个平台。然而&#xff0c;完成Flutter应用程序的开发只是第一步…

Spring Boot 学习(1)——环境搭建

一只老辣鸟的自我救赎 不科普&#xff0c;简单记录学习过程。 开发环境约束&#xff1a; jdk1.8 Spring Boot 1.5.9 Spring 4.3.13 Maven 3.3.3 Intellij IDEA 2017 【脑瓜灵光的开发环境随意&#xff0c;不灵光尽量按上述约束设置。看了好些教程总…

商务电子邮件: 在WorkPlace中高效且安全

高效和安全的沟通是任何组织成功的核心。在我们关于电子邮件类型的系列文章的第二期中&#xff0c;我们将重点关注商业电子邮件在促进无缝交互中的关键作用。当你身处重要的工作场环境时&#xff0c;本系列的每篇文章都提供了电子邮件的不同维度的视角。 “2024年&#xff0c;全…

从开放GPT3.5看大模型发展

当地时间周一(4月1日)&#xff0c;人工智能(AI)公司OpenAI宣布&#xff0c;将允许用户直接使用ChatGPT&#xff0c;而无需注册该项服务&#xff0c;这将让人们更加容易体验人工智能的潜力。 图片来源&#xff1a;OpenAI官网截图 OpenAI表示&#xff0c;它将从周一开始逐步推出…

tomcat-连接器架构设计

一、NioEndpoint组件 Tomcat的NioEndPoint组件实现了I/O多路复用模型&#xff0c;接下来我会介绍NioEndpoint的实现原理。 1.总体工作流程 我们知道&#xff0c;对于Java的多路复用器的使用&#xff0c;无非是两步&#xff1a; 1.创建一个Seletor&#xff0c;在它身上注册各…

asf是什么格式的文件?用手机怎么打开?

由于手机操作系统和硬件的限制&#xff0c;大部分手机并不直接支持asf文件的播放。因此&#xff0c;如果你想在手机上打开asf文件&#xff0c;你可能需要先将文件转换为手机支持的格式&#xff0c;如MP4。可以通过使用一些视频转换软件来实现&#xff0c;比如野葱视频转换器。 …

docker容器技术篇:Docker API配置与常用操作

docker容器技术篇&#xff1a;Docker API配置与使用 一、API具体是什么&#xff1f; 百科解释应用程序接口&#xff08;API&#xff09;&#xff0c;又称为应用编程接口&#xff0c;就是软件系统不同组成部分衔接的约定&#xff0c;蒙了吧&#xff01;&#xff01;&#xff0…