Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lecepin/quick-icon
Convert SVG files to React components with one click
https://github.com/lecepin/quick-icon
Last synced: 4 days ago
JSON representation
Convert SVG files to React components with one click
- Host: GitHub
- URL: https://github.com/lecepin/quick-icon
- Owner: lecepin
- Created: 2023-12-01T13:11:05.000Z (12 months ago)
- Default Branch: master
- Last Pushed: 2023-12-04T07:27:31.000Z (12 months ago)
- Last Synced: 2024-04-16T05:14:35.558Z (7 months ago)
- Language: JavaScript
- Size: 10.7 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 一键 SVG 文件转 React 组件
```
npm i -g quick-icon
```
配置文件默认读取 `.qicon.js`，可通过 `qicon -c xxx.js` 指定。
配置文件格式：
```js
module.exports = {
// 有色 svg 列表
colorIcon: [
{
// 名称
name: "goal",
// svg 内容
content: ``,
},
],
// 单色 svg 列表
solidColorIcon: [
{
name: "lock",
content: ``,
},
],
// 从文件夹读取彩色 svg 文件
colorIconDirPath: "./",
// 从文件夹读取单色 svg 文件
solidColorIconDirPath: "./",
// React 组件 TSX 导出目录
output: "./dist",
// React 组件前缀
compoentPrefix: "Icon",
};
```
在配置文件列表中的 svg 会和从文件读取的 svg 取并集。
生成效果：
index.tsx
```tsx
import React, { FC } from "react";
type TProps = {
className?: string;
style?: React.CSSProperties;
};
export const Icongoal: FC = ({ className, style = {} }) => (
);
export const Iconlocak: FC = ({ className, style = {} }) => (
);
```
直接导入 `index.tsx` 即可以消费图标，纯色图标可通过 `color` CSS 属性进行改色。
执行效果：
```bash
$ qicon
⏳ ===> 查找单色图标
---> 📄 找到单色图标: bread-delimiter.svg
---> 📄 找到单色图标: icon-copy.svg
---> 📄 找到单色图标: icon-delete.svg
---> 📄 找到单色图标: icon-edit.svg
---> 📄 找到单色图标: icon-lock.svg
---> 📄 找到单色图标: icon-one.svg
---> 📄 找到单色图标: info.svg
---> 📄 找到单色图标: min.svg
---> 📄 找到单色图标: send.svg
---> 📄 找到单色图标: terminal-icon-all.svg
---> 📄 找到单色图标: terminal-icon-folder.svg
---> 📄 找到单色图标: 运营.svg
⏳ ===> 生成颜色图标
---> ✅ 生成成功: goal
⏳ ===> 生成单色图标
---> ✅ 生成成功: locak
---> ✅ 生成成功: bread-delimiter
---> ✅ 生成成功: icon-copy
---> ✅ 生成成功: icon-delete
---> ✅ 生成成功: icon-edit
---> ✅ 生成成功: icon-lock
---> ✅ 生成成功: icon-one
---> ✅ 生成成功: info
---> ✅ 生成成功: min
---> ✅ 生成成功: send
---> ✅ 生成成功: terminal-icon-all
---> ✅ 生成成功: terminal-icon-folder
---> ✅ 生成成功: 运营
⏳ ===> 生成组件文件 index.tsx
---> ✅ 生成成功: index.tsx
⏳ ===> 生成预览文件 preview.html
---> ✅ 生成成功: preview.html
🎉 执行完成 🎉
```