学爬虫，吃牢饭，卑微前端小丑复制antd的icon图标真的太难啦，我用python几秒扒完

news2025/1/11 5:51:39

目标需求

最近用react+vite+antd写了个后管项目，在菜单管理中，需要用户选择菜单的icon图标。

如下：

在这里插入图片描述

而在react中使用antd UI库，每个组件都是需要单独导入的，也就是说，如果我要用到所有icon，我需要先把它们全部都导入进来。他不是和vue一样，用组件只用改个名字就行。如果那样还省事了。

antd of react的用法：

import { Button } from 'antd';
import { StepBackwardOutlined } from '@ant-design/icons';
import React from 'react';
const App = () => (
  <>
    <Button type="primary">
    	按钮
    	<StepBackwardOutlined />
	</Button>
  </>
);
export default App;

antd icon：

在这里插入图片描述

然后我就看着UI库中的icon图标陷入了沉思，这tmd少说也有几百个吧，tmd这要挨个cv，这要复制到什么时候去？沙雕项目经理又一直催催催，他媳妇生孩子都没这么着急。

主要写的还是react18，antd5.0的，全都是最新的，妈的痛恨蚂蚁，为什么要改成这个样子，因为好久之前的版本都不需要导入。

在cv5分钟之后我就发疯了，这玩意谁爱写谁写，我就意识到了python这个东西，他妈的，之前怎么就没想到用python扒一下呢？说明人在一心干一件事的时候，眼里容不下别的东西，就像她和别人亲嘴的时候脑子里肯定不会是你！！！

分析实现

说干就干！主打的就是一个偷懒，不，睿智。

我们先打开一下antd库的代码大致看一下结构：

他有5个UI标签，icon就装在这个里面了。请记住这五个Ul的class名：anticons-list

在这里插入图片描述

在往下看，他的icon名字放在哪个标签下面，我们主要就是获取icon的名称，请记住这个span的class名：ant-badge

在这里插入图片描述
那这就简单多了呗，大致说一下思路，先把这网页抓下来，在去遍历一下span。

打开我们的PyCharm，新建一个icon.py。步骤：请求，抓取，遍历，最后打印。

那就用到两个库：
requests 请求
BeautifulSoup 从html中提取数据

直接上代码：

import requests
from bs4 import BeautifulSoup


def getIcon():
    #请求antd UI库
    url = 'https://4x.ant.design/components/icon-cn/#API'
    response = requests.get(url)

    # 获取html数据
    html = response.text
    soup = BeautifulSoup(html, 'html.parser')
    
    # 从数据中查找类名为 anticons-list 的ul标签，下标为0是查找第一个
    ul = soup.findAll("ul",{"class":"anticons-list"})[0]
    # 从提取出来的ul中查找类名为ant-badge的span标签
    span = ul.findAll("span",{'class': 'ant-badge'})
    
    # 遍历提取
    if span:
        for i in span:
            print(i.text+",")

getIcon()