【实战】从零开始打造一个低代码平台——4、拖拽组件

---

对这个系列感兴趣的可以关注订阅专栏：从零开始打造一个低代码平台

前言

之前的几个章节，我们都还没有涉及到任何功能。从这章开始，我们要开始设计第一个功能——控件拖拽。作为一个低代码平台，拖拽控件是一个基本也是一个核心功能，所以今天的内容算是一道主菜。这一部分内容比较多，我们将拆成两个章节。

---

一、使用图标

低代码平台会重度使用很多图标，如何更好的使用图标也是提高效率的关键之一。
我们先来看看使用图标的几种方式。

1.1 image

直接使用图片<img>元素，这里不细述，因为不推荐。

1.2 Icon

用第三方的Icon组件，例如@ant-design/icons，里面有一些内置图标，也可以自定义图标。

yarn add @ant-design/icons

1.3 字体图标

把图标当成字体去使用，灵活度很高，易于定制。这也是我们将采用的方式。

1.3.1 从 iconfont 下载图标代码

把你的图标上传至 iconfont.cn，或者在iconfont.cn上选择允许公开自由使用的图标，然后下载代码。下载的.zip文件解压后，把里面的iconfont.css和iconfont.ttf文件拷贝到src/assets/font目录下。iconfont.css定义了图标（相当于字体）的className，例如我们的文件看起来是这样的：

@font-face {
   
   
  font-family: "iconfont"; /* Project id  */
  src: url('iconfont.ttf?t=1727933264729') format('truetype');
}

.iconfont {
   
   
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-anniu:before {
   
   
  content: "\e76a";
}

1.3.2 引入iconfont.css

在文件的入口App.tsx引入iconfont.css：

import "./styles/index.scss";
import