antd pro icon 自动生成脚本

最新推荐文章于 2024-09-24 20:35:03 发布

m0_48488612

最新推荐文章于 2024-09-24 20:35:03 发布

阅读量341

点赞数

分类专栏： react 文章标签： reactjs node.js 前端

本文链接：https://blog.csdn.net/m0_48488612/article/details/114955663

版权

这篇博客介绍了一个使用Node.js编写的脚本，用于自动将SVG图标转换为antd pro所需的格式。开发者只需将SVG文件与脚本放在同一目录下，运行脚本即可生成所需图标文件。文章还提到，为了生成选中状态的图标，脚本包含了一个isActive参数来控制颜色变化。

摘要由CSDN通过智能技术生成

antd pro icon 自动生成脚本

描述

近两年后台管理系统使用react + antd pro开发，每次菜单都需要需要自定义的icon，每次都需要手动转化，浪费了些许时间，此次使用node.js，一键生成所需icon格式文件。

所需环境

node

目录结构

所有.svg文件放到与脚本相同的文件中
a.svg // svg文件
b.svg // svg文件
c.svg // svg文件
icon.js // 脚本文件
data.js // 生成所需Icon文件每次执行icon.js文件都会重新将data.js文件覆盖
如果生成的icon数量和return中的数据对不上，请检查svg中title的名字是否相同
svg源文件中 </title>名字不要相同，暂不做优化
新增变量isFileName 控制文件变量名的生成,如果为true svg取名必须为英文；
如果为false svg文件中title标签中的内容必须为英文

antd自定义生成的icon无法修改颜色，所以需要再生成一个选中状态的icon
新增 isActive 添加生成选中状态的icon颜色,为true时生成选中状态的颜色

使用时,同级目录下运行 node ./icon.js

// icon.js

const fs = require('fs');

const {
    writeFile } = fs;
const isFileName = false; // true 取文件名为icon变量名,false 则取svg文件中title标签的内容为变量名
const isActive = true; // 是否添加选中状态
const color = "#ffffff"; // 默认状态svg的颜色
const activeColor = "#0f0f0f"; // 选中状态的颜色
const matchingTitle = /<title>(.*)<\/title>/;
const files = fs.readdirSync('./');
let components = files.filter(item => item.includes('.svg'));
let datas = `import Icon from '@ant-design/icons';\n\n`;
components = components.filter(function (item, index, arr) {
   
    return arr.indexOf(item, 0) === index;
});

const filesNumber = components.length;
let i = 0;
let IconName = []
readFiles(0);
console.log("文件生成中...");
function readFiles(index) {
   
    fs.readFile(`./${
     components[index]}`, 'utf8', (err, data) => {
   
        if (err) {
   
            console.error(err)
            return
        }
        let title = data.match(matchingTitle) ? data.match(matchingTitle)[1] : `icon${
     index}`;
        if (isFileName) {
   
            title = components[index].split(".")[0].toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase()