网站建设的需求是什么,天津网站建设制作软件,国家电子商务平台,网站关键词如何做https://github.com/ant-design/ant-design-web3/pull/761/files 实现了icon-preview(通过jsdoc, 鼠标放在组件上可以看到icon的样式)#xff0c;因为打包方式、产物以及命名上有一些不同#xff0c;可能需要稍加改造。 这个同步脚本应该后续也用得上#xff0c;略加改造同步… https://github.com/ant-design/ant-design-web3/pull/761/files 实现了icon-preview(通过jsdoc, 鼠标放在组件上可以看到icon的样式)因为打包方式、产物以及命名上有一些不同可能需要稍加改造。 这个同步脚本应该后续也用得上略加改造同步 svg 可以提高后续添加 svg 的效率直接拖入图片就可以转成组件代码降低cv和命名心智。
在package.json中设置命令可以直接执行ts脚本
icons:generate: NODE_OPTIONS--experimental-specifier-resolutionnode node --loader ts-node/esm ./packages/icons/scripts/generate.ts通过 mport * as allIconDefs from ant-design/web3-icons 获取所有组件使用camelToKebab函数转换需要符合自己命名需求的组件 通过 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/svgxml;base64,${base64};
}function walkT(fn: (iconDef: IconDefinitionWithIdentifier) PromiseT) {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) { % /** */ % } %
export const % svgIdentifier % React.forwardRefHTMLSpanElement, 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 fileconst svgPathToKebab camelToKebab(item.svgIdentifier);try {await writeFile(path.resolve(__dirname, ../../src/components/${svgPathToKebab}.tsx),render(item),);} catch (error) {}});// generate icon indexconst 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();
