当前位置: 首页> 财经> 创投人物 > HOW - SVG 图标组件封装(Lucide React)

HOW - SVG 图标组件封装(Lucide React)

时间:2025/7/10 7:20:25来源:https://blog.csdn.net/weixin_58540586/article/details/140518518 浏览次数:0次

在 HOW - 图形格式SVG及其应用(图标库) 中我们介绍过 “动态 Fetch CDN SVG 图标”,这种在开发者将需要用到 图标 依次上传到 CDN 再在项目通过请求引入使用的场景。

但其实,更常见的做法还是统一维护一组 SVG 图标,然后将其封装成组件,直接在项目中通过 Import 的形式使用。

Lucide React

  • Lucide icons
  • Lucide React

lucide-react 是一个为 React 提供图标的库,它是基于 Lucide 项目构建的。Lucide 是一个开源图标库,具有灵活、可定制和轻量的特点。lucide-react 允许在 React 项目中轻松地使用这些图标。

以下是 lucide-react 的工作原理和一些关键点:

主要原理

  1. 基于 SVG 的图标:
    Lucide 图标库中的所有图标都是基于 SVG(可缩放矢量图形)的。这意味着图标可以在任何大小下保持清晰和不失真,非常适合现代响应式设计。

  2. React 组件:
    lucide-react 将这些 SVG 图标封装成 React 组件。每个图标都可以作为一个独立的 React 组件使用,这使得它们的集成非常方便,并且能够利用 React 的声明式特性和组件化优势。

  3. 灵活可定制:
    由于这些图标是基于 SVG 的,开发者可以轻松地通过 React 的属性来定制图标的大小、颜色、样式等。lucide-react 组件通常接受标准的 SVG 属性,如 width, height, stroke, fill 等,使得定制变得非常简单。

安装和使用

安装 lucide-react:

你可以通过 npm 或 yarn 安装 lucide-react

npm install lucide-react

yarn add lucide-react

使用 lucide-react:

安装之后,你可以在你的 React 项目中导入和使用图标。例如:

import React from 'react';
import { ArrowRight, Home } from 'lucide-react';function App() {return (<div><h1>My App</h1><ArrowRight size={24} color="red" /><Home size={32} color="blue" /></div>);
}export default App;

在这个例子中,ArrowRightHome 图标作为 React 组件使用。你可以通过传递属性来定制它们的大小和颜色。

工作原理详解

  1. SVG 图标文件:
    Lucide 项目包含了一系列的 SVG 图标文件,每个图标都是一个独立的 SVG 文件。

  2. React 组件封装:
    lucide-react 库会将这些 SVG 文件转换为 React 组件。这个转换过程通常会在构建阶段完成,通过脚本将每个 SVG 文件转换为一个对应的 React 组件。

  3. 组件导出:
    转换后的 React 组件会被导出,并作为 lucide-react 库的一部分发布到 npm 上。开发者可以在他们的 React 项目中导入这些组件并使用。

React 组件封装:SVG 文件转换为 React 组件

两个源码方法:createLucideIcon、Icon

去翻阅源码实现,可以发现有如下两个重要的方法:

// https://github.com/lucide-icons/lucide/blob/main/packages/lucide-react/src/createLucideIcon.ts
import { createElement, forwardRef } from 'react';
import { mergeClasses, toKebabCase } from '@lucide/shared';
import { IconNode, LucideProps } from './types';
import Icon from './Icon';/*** Create a Lucide icon component* @param {string} iconName* @param {array} iconNode* @returns {ForwardRefExoticComponent} LucideIcon*/
const createLucideIcon = (iconName: string, iconNode: IconNode) => {const Component = forwardRef<SVGSVGElement, LucideProps>(({ className, ...props }, ref) =>createElement(Icon, {ref,iconNode,className: mergeClasses(`lucide-${toKebabCase(iconName)}`, className),...props,}),);Component.displayName = `${iconName}`;return Component;
};export default createLucideIcon;
// https://github.com/lucide-icons/lucide/blob/main/packages/lucide-react/src/Icon.ts
import { createElement, forwardRef } from 'react';
import defaultAttributes from './defaultAttributes';
import { IconNode, LucideProps } from './types';
import { mergeClasses } from '@lucide/shared';interface IconComponentProps extends LucideProps {iconNode: IconNode;
}/*** Lucide icon component** @component Icon* @param {object} props* @param {string} props.color - The color of the icon* @param {number} props.size - The size of the icon* @param {number} props.strokeWidth - The stroke width of the icon* @param {boolean} props.absoluteStrokeWidth - Whether to use absolute stroke width* @param {string} props.className - The class name of the icon* @param {IconNode} props.children - The children of the icon* @param {IconNode} props.iconNode - The icon node of the icon** @returns {ForwardRefExoticComponent} LucideIcon*/
const Icon = forwardRef<SVGSVGElement, IconComponentProps>(({color = 'currentColor',size = 24,strokeWidth = 2,absoluteStrokeWidth,className = '',children,iconNode,...rest},ref,) => {return createElement('svg',{ref,...defaultAttributes,width: size,height: size,stroke: color,strokeWidth: absoluteStrokeWidth ? (Number(strokeWidth) * 24) / Number(size) : strokeWidth,className: mergeClasses('lucide', className),...rest,},[...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),...(Array.isArray(children) ? children : [children]),],);},
);export default Icon;

从这两个方法可以看出一些端倪,即基于 React 的 createElement 来转换成 React 组件。

模拟构建过程

下面介绍一般如何去构建一个图标转换过程并导出供使用者使用。

1. 源码结构

通常,目录结构会包含以下部分:

  • src/icons: 包含所有 SVG 图标文件的目录。
  • src/components: 存放将 SVG 图标转换为 React 组件的代码。
  • scripts: 包含用于自动化转换和构建的脚本。
  • index.js: 入口文件,导出所有图标组件。

2. SVG 图标转换为 React 组件

核心过程是将每个 SVG 图标文件转换为一个 React 组件。这个转换过程通常包括以下步骤:

a. 读取 SVG 文件

使用 Node.js 的文件系统模块(fs)读取存放在 src/icons 目录中的所有 SVG 文件。

const fs = require('fs');
const path = require('path');const iconsDir = path.resolve(__dirname, 'src/icons');
const iconFiles = fs.readdirSync(iconsDir);
b. 生成 React 组件代码

遍历每个 SVG 文件,生成对应的 React 组件代码。使用模板字符串创建 React 组件。

iconFiles.forEach(file => {const iconName = path.basename(file, '.svg');const svgContent = fs.readFileSync(path.join(iconsDir, file), 'utf8');const componentCode = `
import React from 'react';const ${iconName} = (props) => (<svg {...props}>${svgContent}</svg>
);export default ${iconName};`;fs.writeFileSync(path.join(__dirname, `src/components/${iconName}.js`), componentCode);
});
c. 生成索引文件

为了方便导入所有图标组件,生成一个索引文件(index.js),导出所有组件。

const indexContent = iconFiles.map(file => {const iconName = path.basename(file, '.svg');return `export { default as ${iconName} } from './components/${iconName}';`;
}).join('\n');fs.writeFileSync(path.join(__dirname, 'src/index.js'), indexContent);

3. 发布到 npm

通过 package.json 配置,指定入口文件为生成的 src/index.js,并发布到 npm 上。

package.json:

{"name": "lucide-react","version": "1.0.0","main": "src/index.js","dependencies": {"react": "^17.0.0"},"scripts": {"build": "node scripts/build.js"}
}

4. 在项目中使用

开发者在项目中通过 npm 安装 lucide-react,并使用导出的图标组件。

npm install lucide-react

然后在 React 项目中导入和使用图标组件:

import React from 'react';
import { ArrowRight, Home } from 'lucide-react';function App() {return (<div><h1>My App</h1><ArrowRight size={24} color="red" /><Home size={32} color="blue" /></div>);
}export default App;
关键字:HOW - SVG 图标组件封装(Lucide React)

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: