Skip to content

Linzp #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zhipenglin merged 2 commits into from
Jan 28, 2026
Merged

Linzp #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8561412
添加了集中类型
zhipenglin Jan 28, 2026
72063cd
更新文档
zhipenglin Jan 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
113 changes: 70 additions & 43 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,66 +16,93 @@ npm i --save @kne/react-file-type

### 概述

根据文件后缀名显示对应的文件图标
根据文件后缀名显示对应的文件图标组件，支持 18 种常见文件格式。


### 示例

#### 示例代码

- 基本：
- 支持14种文件格式，如：doc | docx | gif | jpg | mp4 | pdf | png | ppt | pptx | rar | svg | xls | xlsx | zip
- 基本用法
- 支持18种文件格式，包括：doc | docx | gif | html | jpg | md | mp4 | pdf | png | ppt | pptx | rar | svg | txt | xls | xlsx | zip
- fileType(@kne/current-lib_react-file-type),space(antd/lib/space)

```jsx
const {default: FileType} = fileType;
const {default: Space} = space;
const { default: FileType } = fileType;
const { default: Space } = space;
const BaseExample = () => {
return <Space direction="vertical">
<div>
加载PDF文件：
</div>
<Space>
<FileType type="doc"/>
<FileType type="docx"/>
<FileType type="gif"/>
<FileType type="jpg"/>
<FileType type="mp4"/>
<FileType type="pdf"/>
<FileType type="png"/>
<FileType type="ppt"/>
<FileType type="pptx"/>
<FileType type="rar"/>
<FileType type="svg"/>
<FileType type="xls"/>
<FileType type="xlsx"/>
<FileType type="zip"/>
return (
<Space direction="vertical" size="large">
<div>
<div style={{ marginBottom: 12, fontWeight: 'bold' }}>支持的文件格式：</div>
<Space wrap>
<FileType type="doc" />
<FileType type="docx" />
<FileType type="gif" />
<FileType type="html" />
<FileType type="jpg" />
<FileType type="md" />
<FileType type="mp4" />
<FileType type="pdf" />
<FileType type="png" />
<FileType type="ppt" />
<FileType type="pptx" />
<FileType type="rar" />
<FileType type="svg" />
<FileType type="txt" />
<FileType type="xls" />
<FileType type="xlsx" />
<FileType type="zip" />
</Space>
<Space direction="vertical">
<div>自定义尺寸:</div>
<Space>
<FileType type="doc" size={30}/>
<FileType type="doc" size={40}/>
<FileType type="doc" size={50}/>
</Space>
</div>
<div>
<div style={{ marginBottom: 12, fontWeight: 'bold' }}>自定义尺寸：</div>
<Space>
<FileType type="doc" size={30} />
<FileType type="doc" size={40} />
<FileType type="doc" size={50} />
<FileType type="doc" size={60} />
</Space>
<div>
不支持的文件格式显示如下：
</div>
<div>
<FileType type="msg"/>
</div>
</Space>;
</div>
<div>
<div style={{ marginBottom: 12, fontWeight: 'bold' }}>不支持的文件格式：</div>
<FileType type="msg" />
</div>
</Space>
);
};

render(<BaseExample/>);
render(<BaseExample />);

```


### API

|属性名|说明|类型| 默认值 |
| --- | --- | --- |--------|
| type | 文件后缀名 | doc &#124; docx &#124; gif &#124; jpg &#124; mp4 &#124; pdf &#124; png &#124; ppt &#124; pptx &#124; rar &#124; svg &#124; xls &#124; xlsx &#124; zip | unknow |
| size| 图标大小| number| 40 |
| 属性名 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| type | 文件后缀名 | string | unknow |
| size | 图标大小 | number | 40 |

### type 支持的文件类型

- `doc` - Word 文档
- `docx` - Word 文档
- `gif` - GIF 图片
- `html` - HTML 文件
- `jpg` - JPG 图片
- `md` - Markdown 文件
- `mp4` - MP4 视频
- `pdf` - PDF 文档
- `png` - PNG 图片
- `ppt` - PowerPoint 演示文稿
- `pptx` - PowerPoint 演示文稿
- `rar` - RAR 压缩包
- `svg` - SVG 矢量图
- `txt` - 纯文本文件
- `xls` - Excel 表格
- `xlsx` - Excel 表格
- `zip` - ZIP 压缩包

其他不支持的文件类型将显示为通用图标。

30 changes: 26 additions & 4 deletions doc/api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,26 @@
|属性名|说明|类型| 默认值 |
| --- | --- | --- |--------|
| type | 文件后缀名 | doc &#124; docx &#124; gif &#124; jpg &#124; mp4 &#124; pdf &#124; png &#124; ppt &#124; pptx &#124; rar &#124; svg &#124; xls &#124; xlsx &#124; zip | unknow |
| size| 图标大小| number| 40 |
| 属性名 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| type | 文件后缀名 | string | unknow |
| size | 图标大小 | number | 40 |

### type 支持的文件类型

- `doc` - Word 文档
- `docx` - Word 文档
- `gif` - GIF 图片
- `html` - HTML 文件
- `jpg` - JPG 图片
- `md` - Markdown 文件
- `mp4` - MP4 视频
- `pdf` - PDF 文档
- `png` - PNG 图片
- `ppt` - PowerPoint 演示文稿
- `pptx` - PowerPoint 演示文稿
- `rar` - RAR 压缩包
- `svg` - SVG 矢量图
- `txt` - 纯文本文件
- `xls` - Excel 表格
- `xlsx` - Excel 表格
- `zip` - ZIP 压缩包

其他不支持的文件类型将显示为通用图标。
76 changes: 40 additions & 36 deletions doc/base.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,45 @@
const {default: FileType} = fileType;
const {default: Space} = space;
const { default: FileType } = fileType;
const { default: Space } = space;
const BaseExample = () => {
return <Space direction="vertical">
<div>
加载PDF文件：
</div>
<Space>
<FileType type="doc"/>
<FileType type="docx"/>
<FileType type="gif"/>
<FileType type="jpg"/>
<FileType type="mp4"/>
<FileType type="pdf"/>
<FileType type="png"/>
<FileType type="ppt"/>
<FileType type="pptx"/>
<FileType type="rar"/>
<FileType type="svg"/>
<FileType type="xls"/>
<FileType type="xlsx"/>
<FileType type="zip"/>
return (
<Space direction="vertical" size="large">
<div>
<div style={{ marginBottom: 12, fontWeight: 'bold' }}>支持的文件格式：</div>
<Space wrap>
<FileType type="doc" />
<FileType type="docx" />
<FileType type="gif" />
<FileType type="html" />
<FileType type="jpg" />
<FileType type="md" />
<FileType type="mp4" />
<FileType type="pdf" />
<FileType type="png" />
<FileType type="ppt" />
<FileType type="pptx" />
<FileType type="rar" />
<FileType type="svg" />
<FileType type="txt" />
<FileType type="xls" />
<FileType type="xlsx" />
<FileType type="zip" />
</Space>
<Space direction="vertical">
<div>自定义尺寸:</div>
<Space>
<FileType type="doc" size={30}/>
<FileType type="doc" size={40}/>
<FileType type="doc" size={50}/>
</Space>
</div>
<div>
<div style={{ marginBottom: 12, fontWeight: 'bold' }}>自定义尺寸：</div>
<Space>
<FileType type="doc" size={30} />
<FileType type="doc" size={40} />
<FileType type="doc" size={50} />
<FileType type="doc" size={60} />
</Space>
<div>
不支持的文件格式显示如下：
</div>
<div>
<FileType type="msg"/>
</div>
</Space>;
</div>
<div>
<div style={{ marginBottom: 12, fontWeight: 'bold' }}>不支持的文件格式：</div>
<FileType type="msg" />
</div>
</Space>
);
};

render(<BaseExample/>);
render(<BaseExample />);
4 changes: 2 additions & 2 deletions doc/example.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
"isFull": false,
"list": [
{
"title": "基本：",
"description": "支持14种文件格式，如：doc | docx | gif | jpg | mp4 | pdf | png | ppt | pptx | rar | svg | xls | xlsx | zip",
"title": "基本用法",
"description": "支持18种文件格式，包括：doc | docx | gif | html | jpg | md | mp4 | pdf | png | ppt | pptx | rar | svg | txt | xls | xlsx | zip",
"code": "./base.js",
"scope": [
{
Expand Down
2 changes: 1 addition & 1 deletion doc/summary.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
根据文件后缀名显示对应的文件图标
根据文件后缀名显示对应的文件图标组件，支持 18 种常见文件格式。
5 changes: 4 additions & 1 deletion example/craco.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
const {CracoLibsExamplePlugin, env} = require('@kne/modules-dev');
const aliasConfig = require('./webstorm.webpack.config');
const packageJson = require('../package.json');

process.env.CI = false;

module.exports = {
webpack: {
alias: aliasConfig.resolve.alias, configure: (webpackConfig) => {
const definePlugin = webpackConfig.plugins.find((plugin) => plugin.constructor.name === 'DefinePlugin');
Object.assign(definePlugin.definitions['process.env'], {});
Object.assign(definePlugin.definitions['process.env'], {
DEFAULT_VERSION: `"${packageJson.version}"`
});
return webpackConfig;
}
}, plugins: [{
Expand Down
3 changes: 2 additions & 1 deletion example/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@kne-components/react-file-type",
"version": "0.1.1",
"version": "0.1.0",
"dependencies": {
"@kne/current-lib_react-file-type": "file:..",
"react": "file:../node_modules/react",
Expand Down Expand Up @@ -34,6 +34,7 @@
},
"devDependencies": {
"@craco/craco": "^7.1.0",
"@kne/axios-fetch": "^1.0.7",
"@kne/craco-module-federation": "^1.1.2",
"@kne/modules-dev": "^2.0.6",
"@kne/react-fetch": "^1.4.2",
Expand Down
8 changes: 4 additions & 4 deletions example/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { HashRouter } from "react-router-dom";
import createEntry from "@kne/modules-dev/dist/create-entry";
import createEntry from "@kne/modules-dev/dist/create-entry.modern";
import "@kne/modules-dev/dist/create-entry.css";
import readme from "readme";

const ExampleRoutes = createEntry.ExampleRoutes;

const App = ({ preset, themeToken, ...props }) => {
const App = ({ globalPreset, ...props }) => {
return (
<HashRouter>
<ExampleRoutes
Expand All @@ -17,8 +17,8 @@ const App = ({ preset, themeToken, ...props }) => {
title: "首页",
},
]}
preset={preset}
themeToken={themeToken}
preset={globalPreset}
themeToken={globalPreset.themeToken}
readme={readme}
pageProps={{ menu: null }}
/>
Expand Down
21 changes: 9 additions & 12 deletions example/src/bootstrap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,13 @@
import { ajax } from "./preset";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { globalInit } from './preset';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById("root"));
const root = ReactDOM.createRoot(document.getElementById('root'));

const themeToken = {
colorPrimary: "#4F185A",
const renderRoot = async (App) => {
const globalPreset = await globalInit();
return root.render(<App themeToken={globalPreset.themeToken} globalPreset={globalPreset} />);
};

root.render(
<React.StrictMode>
<App preset={{ ajax }} themeToken={themeToken} />
</React.StrictMode>
);
renderRoot(App);
Loading