105 lines
2.8 KiB
JavaScript
105 lines
2.8 KiB
JavaScript
import fs from "fs";
|
|
import path from "path";
|
|
import { optimize } from "svgo";
|
|
import { fileURLToPath } from "url";
|
|
import { dirname } from "path";
|
|
|
|
const __filename = fileURLToPath(import.meta.url);
|
|
const __dirname = dirname(__filename);
|
|
|
|
const svgoConfig = {
|
|
plugins: [
|
|
{ name: "removeTitle", active: true },
|
|
{ name: "removeAttrs", params: { attrs: "(data-name)" } },
|
|
{ name: "removeDimensions", active: true },
|
|
{ name: "convertColors", params: { currentColor: true } },
|
|
],
|
|
};
|
|
|
|
const iconMetadataPath = path.resolve(__dirname, "./iconMetadata.json");
|
|
const iconMetadata = JSON.parse(fs.readFileSync(iconMetadataPath, "utf-8"));
|
|
|
|
const generateIconComponent = (name, svgContent, description, usage) => `
|
|
import * as React from 'react';
|
|
|
|
interface IconProps extends React.SVGAttributes<SVGElement> {
|
|
children?: never;
|
|
color?: string;
|
|
}
|
|
|
|
/**
|
|
* ${description}
|
|
*
|
|
* @usage
|
|
* ${usage}
|
|
*/
|
|
export const ${name}Icon = React.forwardRef<SVGSVGElement, IconProps>(
|
|
({ color = 'currentColor', ...props }, forwardedRef) => {
|
|
return (
|
|
${svgContent.replace("<svg", "<svg {...props} ref={forwardedRef}")}
|
|
);
|
|
}
|
|
);
|
|
|
|
${name}Icon.displayName = '${name}Icon';
|
|
`;
|
|
|
|
const generateIndexFile = (components, iconType) => {
|
|
const exports = components
|
|
.map((name) => `export { ${name}Icon } from './${name}Icon';`)
|
|
.join("\n");
|
|
const indexPath = path.resolve(__dirname, `../src/${iconType}/index.ts`);
|
|
fs.writeFileSync(indexPath, exports, "utf-8");
|
|
};
|
|
|
|
const processIcons = async (iconType) => {
|
|
const svgDir = path.resolve(__dirname, `../src/svgs/${iconType}`);
|
|
const componentDir = path.resolve(__dirname, `../src/${iconType}`);
|
|
|
|
if (!fs.existsSync(componentDir)) {
|
|
fs.mkdirSync(componentDir, { recursive: true });
|
|
}
|
|
|
|
const components = [];
|
|
|
|
const files = fs.readdirSync(svgDir);
|
|
|
|
for (const file of files) {
|
|
const filePath = path.resolve(svgDir, file);
|
|
const svgContent = fs.readFileSync(filePath, "utf-8");
|
|
const { data } = await optimize(svgContent, svgoConfig);
|
|
|
|
const componentName = file
|
|
.replace(".svg", "")
|
|
.replace(/(^\w|-\w)/g, clearAndUpper);
|
|
const metadata = iconMetadata[componentName];
|
|
if (!metadata) {
|
|
console.error(`Metadata for ${componentName} not found`);
|
|
continue;
|
|
}
|
|
|
|
components.push(componentName);
|
|
const componentContent = generateIconComponent(
|
|
componentName,
|
|
data,
|
|
metadata.description,
|
|
metadata.usage
|
|
);
|
|
|
|
const componentPath = path.resolve(
|
|
componentDir,
|
|
`${componentName}Icon.tsx`
|
|
);
|
|
fs.writeFileSync(componentPath, componentContent, "utf-8");
|
|
}
|
|
|
|
generateIndexFile(components, iconType);
|
|
};
|
|
|
|
const clearAndUpper = (text) => text.replace(/-/, "").toUpperCase();
|
|
|
|
(async () => {
|
|
await processIcons("solid");
|
|
await processIcons("outline");
|
|
})();
|