feat(Icon): icon harmony adaptation #2788
Conversation
Walkthrough此拉取请求主要涉及对 Changes
Possibly related PRs
Suggested labels
📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (1)
🔇 Additional comments (1)package.json (1)
考虑到以下几点：
建议：
✅ Verification successfulLet me gather more information about the version compatibility and harmony adaptation by checking the actual code changes and dependencies. Let me check the actual icon usage and harmony-related changes in the codebase. Based on the analysis of the codebase, I can now generate the final response: 图标包版本 2.0.1 与当前代码库兼容，无需更改 原因：
🏁 Scripts executedThe following scripts were executed for the analysis: Script: #!/bin/bash
# Description: Check changelog and version compatibility
# Check the changelog for breaking changes
gh api repos/jdf2e/nutui-icons-react-taro/releases | jq -r '.[].body' | grep -i "breaking\|harmony"
# Check if there's a newer version available that might better support harmony adaptation
curl -s https://registry.npmjs.org/@nutui/icons-react-taro | jq -r '."dist-tags"'
Length of output: 346 Script: #!/bin/bash
# Check the actual changes in config.json mentioned in the summary
fd config.json --exec cat {}
# Check if there are any harmony-related changes in the codebase
rg -i "harmony" --type ts --type tsx --type js --type jsx
# Check package.json for related dependencies
cat package.json | jq '.dependencies'
Length of output: 50171 Script: #!/bin/bash
# Check for icon imports and usage
rg -i "@nutui/icons-react-taro" --type ts --type js -C 2
# Check for any harmony-related changes in source files
fd -e ts -e js -e tsx -e jsx --exec cat {} | grep -i "harmony"
# Check if there are any icon-related components that might be affected
fd Icon.tsx -e tsx --exec cat {}
Length of output: 67347 Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## V3.0 #2788 +/- ##
=======================================
Coverage 83.98% 83.98%
=======================================
Files 220 220
Lines 17881 17881
Branches 2676 2676
=======================================
Hits 15018 15018
Misses 2858 2858
Partials 5 5 ☔ View full report in Codecov by Sentry. 🚨 Try these New Features:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Outside diff range and nitpick comments (9)
src/packages/icon/demos/taro/demo4.tsx (1)
8-10: 图标组件替换和样式设置合理将 IconFont 替换为 Dongdong 组件的改动符合图标统一性要求，颜色和边距样式设置恰当。建议考虑以下优化：
- 考虑将重复的 style 属性抽取为统一的样式常量
- 可以考虑使用主题变量来管理颜色值，而不是硬编码的十六进制颜色
建议的重构方案：
import React from 'react' import { Cell } from '@nutui/nutui-react-taro' import { Dongdong } from '@nutui/icons-react-taro' +const iconStyle = { marginRight: '10px' } + const Demo4 = () => { return ( <Cell> - <Dongdong color="#FF0F23" style={{ marginRight: '10px' }} /> - <Dongdong color="#64b578" style={{ marginRight: '10px' }} /> + <Dongdong color="#FF0F23" style={iconStyle} /> + <Dongdong color="#64b578" style={iconStyle} /> <Dongdong color="#ffd700" /> </Cell> ) }src/packages/icon/demos/taro/demo5.tsx (2)
3-3: 导入语句优化建议建议将所有图标组件的导入语句进行分组和整理，以提高代码的可维护性。
建议按照以下方式组织导入：
import React from 'react' import { Cell } from '@nutui/nutui-react-taro' +// Icons import { Dongdong } from '@nutui/icons-react-taro'
8-10: 图标使用规范合理图标大小的递增梯度（16/20/24）符合设计规范，间距设置合理。
不过建议添加适当的注释来说明不同尺寸的使用场景：
<Cell style={{ alignItems: 'center' }}> + {/* 小型图标 - 用于紧凑型界面 */} <Dongdong size="16" style={{ marginRight: '10px' }} /> + {/* 中型图标 - 用于常规界面 */} <Dongdong size="20" style={{ marginRight: '10px' }} /> + {/* 大型图标 - 用于强调显示 */} <Dongdong size="24" /> </Cell>src/packages/icon/demos/taro/demo1.tsx (1)
10-11: 建议保持图标间距的一致性为了保持界面的视觉一致性，建议给最后的
Minus图标也添加相同的边距样式。建议按照如下方式修改：
<Dongdong style={{ marginRight: '10px' }} /> - <Minus /> + <Minus style={{ marginRight: '10px' }} />src/packages/icon/demos/taro/demo3.tsx (1)
10-11: 建议：移除冗余的尺寸属性当已经设置了
size属性时，同时设置width和height是冗余的，因为size属性已经定义了图标的尺寸。建议保持代码简洁，移除这些重复的属性。<IconFont size={40} - width={40} - height={40} name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png" />src/packages/icon/demos/taro/demo6.tsx (3)
2-2: 建议使用具体导入而不是通配符导入使用
import * as通配符导入可能会影响打包优化和树摇（tree-shaking）。建议仅导入需要使用的具体图标组件。-import * as iconfonts from '@nutui/icons-react-taro' +import { IconFontConfig, IconFont } from '@nutui/icons-react-taro'
Line range hint
13-21: 需要处理非Web环境下的复制功能当前的复制实现使用了浏览器的
documentAPI，这在非Web环境（如小程序）中可能无法正常工作。建议添加平台检查并提供替代实现。建议添加平台检查：
const copyTag = (text: string) => { + if (!web()) { + // 使用平台特定的API处理复制功能 + return; + } const input = document.createElement('input') // ... 现有Web实现 }
Line range hint
36-63: 建议提取样式到独立的样式文件当前实现中包含大量内联样式，建议将这些样式提取到独立的样式文件中以提高可维护性和复用性。
建议创建独立的样式文件：
// styles.ts export const iconGridStyles = { container: { display: 'flex', flexWrap: 'wrap', padding: '0', width: '100%', }, item: { maxWidth: '25%', height: '60px', display: 'flex', flex: '0 0 25%', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', }, }然后在组件中引用：
-<View - style={{ - display: 'flex', - flexWrap: 'wrap', - padding: '0', - width: '100%', - }} +<View style={iconGridStyles.container}src/packages/icon/demos/taro/demo7.tsx (1)
Line range hint
36-41: 建议提取样式定义内联样式定义较长，建议将其提取到单独的样式文件中以提高代码的可维护性和可读性。
建议修改如下：
+ // styles.ts + export const containerStyle = { + display: 'flex', + flexWrap: 'wrap', + padding: '0', + width: '100%', + } + + export const iconItemStyle = { + maxWidth: '25%', + height: '60px', + display: 'flex', + flex: '0 0 25%', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + } - <View style={{display: 'flex', flexWrap: 'wrap', padding: '0', width: '100%'}}> + <View style={containerStyle}> {/* ... */} - <View style={{maxWidth: '25%', height: '60px', /* ... */}}> + <View style={iconItemStyle}>Also applies to: 46-65
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (9)
src/config.json(1 hunks)src/packages/icon/demo.taro.tsx(3 hunks)src/packages/icon/demos/taro/demo1.tsx(1 hunks)src/packages/icon/demos/taro/demo2.tsx(0 hunks)src/packages/icon/demos/taro/demo3.tsx(1 hunks)src/packages/icon/demos/taro/demo4.tsx(1 hunks)src/packages/icon/demos/taro/demo5.tsx(1 hunks)src/packages/icon/demos/taro/demo6.tsx(4 hunks)src/packages/icon/demos/taro/demo7.tsx(4 hunks)
💤 Files with no reviewable changes (1)
- src/packages/icon/demos/taro/demo2.tsx
🔇 Additional comments (10)
src/packages/icon/demos/taro/demo4.tsx (1)
3-3: 从 @nutui/icons-react-taro 导入 Dongdong 图标组件符合规范
导入语句清晰明确，使用了正确的包路径。
src/packages/icon/demos/taro/demo1.tsx (1)
3-3: 导入语句组织合理！
图标导入语句保持了良好的组织结构，相关的图标组件都从同一个包中导入，符合代码规范。
src/packages/icon/demos/taro/demo3.tsx (1)
9-9: 类型改进：将 size 从字符串改为数字类型
将 size 属性从字符串类型 "40" 改为数字类型 40 是一个很好的改进，这样可以避免不必要的类型转换，提高代码的类型安全性。
src/packages/icon/demo.taro.tsx (3)
18-18: 翻译字符串的一致性更新
所有语言版本都添加了 ": SVG" 后缀，保持了良好的多语言一致性。
Also applies to: 24-24, 30-30
4-4: 确认样式导入的必要性
取消注释的样式导入可能会影响整个应用的图标显示。请确认此更改是否为有意而为之。
运行以下脚本以验证样式文件的使用情况：
✅ Verification successful
样式导入是必要的
该样式导入是 Icon 组件 Demo 页面所必需的，用于展示图标的基础样式。从代码中可以看到，此文件是一个演示文件，包含了多个 Icon 相关的 Demo 组件（Demo1-Demo7），需要这个样式文件来正确显示图标。取消注释是合理的修改。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查样式文件的引用
rg -l '@nutui/icons-react-taro/dist/style_iconfont.css'
Length of output: 87
Script:
#!/bin/bash
# 检查其他 demo.taro.tsx 文件中的图标使用情况
fd -e tsx -e ts -e js "demo.taro" --exec rg -l "icons-react-taro"
# 检查是否有其他文件引用了相关的图标组件
rg -l "Icon['\"]" --type tsx --type ts
Length of output: 168
Script:
#!/bin/bash
# 检查其他文件中的图标组件使用情况
rg -l "Icon"
# 检查当前文件的完整内容以了解图标的使用上下文
cat src/packages/icon/demo.taro.tsx
Length of output: 15044
69-69: 验证组件依赖关系
新增的 Demo1 组件替换了之前的 Demo2 组件，这是一个重要的结构变化。
运行以下脚本以检查相关组件的依赖关系：
src/packages/icon/demos/taro/demo7.tsx (1)
2-6: 导入语句的改进
将图标导入方式改为命名空间导入可以提高代码的可维护性，同时添加了 Taro 相关的组件和工具函数，使代码更具跨平台兼容性。
src/config.json (3)
Line range hint 1-1183: 配置结构清晰，符合规范
配置文件的组织结构合理：
- 组件分类明确（基础组件、布局组件等）
- 组件元数据字段统一（version、name、type 等）
- 文档相关配置完整
Line range hint 108-119: 请确认 exclude 标志的用途
Icon 组件配置中包含 "exclude": true 属性，这可能会影响组件的打包或导出行为。请确认这是否是有意为之。
✅ Verification successful
Icon 组件的 exclude 标志设置是合理的
根据验证结果，在整个配置文件中，只有 Icon 组件设置了 exclude: true。这是一个独特的配置，考虑到这是一个基于 IconFont 的图标组件，可能需要特殊的构建或打包处理，因此这个设置是合理的。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查其他组件是否也使用了 exclude 标志
rg -l '"exclude":\s*true' | grep -v "config.json"
Length of output: 49
Script:
#!/bin/bash
# 检查 config.json 中所有组件的 exclude 标志使用情况
cat src/config.json | jq -r '.nav[] | select(.packages) | .packages[] | select(.exclude != null) | {name: .name, exclude: .exclude, version: .version}'
Length of output: 215
Line range hint 1-1183: 建议检查组件版本升级的一致性
配置文件中存在多个组件版本从 2.0.0 升级到 3.0.0，但以下组件仍然保持在 2.0.0 版本：
- Sticky
- Elevator
- FixedNav
- SideNavBar
- Tabbar
- Calendar
- Menu
- NumberKeyboard
等。
建议：
- 确认这些组件是否也需要升级到 3.0.0
- 如果不需要升级，请在文档中说明原因
| import { Dongdong } from '@nutui/icons-react-taro' | ||
|
|
||
| const Demo5 = () => { | ||
| return ( | ||
| <Cell style={{ alignItems: 'center' }}> | ||
| <IconFont name="dongdong" size="16" style={{ marginRight: '10px' }} /> | ||
| <IconFont name="dongdong" size="20" style={{ marginRight: '10px' }} /> | ||
| <IconFont name="dongdong" size="24" /> | ||
| <Dongdong size="16" style={{ marginRight: '10px' }} /> | ||
| <Dongdong size="20" style={{ marginRight: '10px' }} /> | ||
| <Dongdong size="24" /> |
There was a problem hiding this comment.
💡 Codebase verification
需要完成 H5 版本的图标组件迁移
在代码库中发现以下问题：
- H5 演示文件中仍在使用旧的 IconFont 组件显示 dongdong 图标：
- src/packages/icon/demos/h5/demo2.tsx
- src/packages/icon/demos/h5/demo4.tsx
- src/packages/icon/demos/h5/demo5.tsx
请将这些文件中的 IconFont 组件替换为新的 Dongdong 组件，以保持组件使用的一致性。
🔗 Analysis chain
验证图标组件迁移的完整性
需要确保所有使用 "dongdong" 图标的地方都已经迁移到新的 Dongdong 组件。
Let me check the content of those files to better understand the migration status.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查是否还有其他文件使用旧的 IconFont 组件显示 dongdong 图标
# 搜索可能遗留的 IconFont dongdong 使用
echo "检查 IconFont dongdong 的使用..."
rg -l "IconFont.*dongdong" src/
# 搜索新 Dongdong 组件的使用情况
echo "检查 Dongdong 组件的使用情况..."
rg -l "import.*Dongdong.*from.*@nutui/icons-react" src/
Length of output: 730
Script:
#!/bin/bash
# 检查 IconFont dongdong 的具体使用情况
echo "IconFont dongdong 的使用内容："
rg "IconFont.*dongdong" src/packages/icon/demos/h5/demo*.tsx -A 2
# 检查新 Dongdong 组件的具体使用情况
echo "\n新 Dongdong 组件的使用内容："
rg "import.*Dongdong.*from.*@nutui/icons-react" -A 2 src/packages/icon/demos/h5/demo*.tsx src/packages/icon/demos/taro/demo*.tsx
Length of output: 2642
| {!web() ? ( | ||
| React.createElement( | ||
| iconfonts[camelCase(icon, { pascalCase: true })] || '' | ||
| ) | ||
| ) : ( | ||
| <iconfonts.IconFont name={icon} /> | ||
| )} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议优化条件渲染逻辑并添加错误处理
当前的平台特定渲染逻辑可以更加健壮。建议：
- 添加错误处理以防止图标组件不存在
- 考虑将平台特定逻辑提取到独立组件
建议重构为：
-{!web() ? (
- React.createElement(
- iconfonts[camelCase(icon, { pascalCase: true })] || ''
- )
-) : (
- <iconfonts.IconFont name={icon} />
-)}
+{!web() ? (
+ (() => {
+ const IconComponent = iconfonts[camelCase(icon, { pascalCase: true })];
+ if (!IconComponent) {
+ console.warn(`图标组件 ${icon} 不存在`);
+ return null;
+ }
+ return <IconComponent />;
+ })()
+) : (
+ <iconfonts.IconFont name={icon} />
+)}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {!web() ? ( | |
| React.createElement( | |
| iconfonts[camelCase(icon, { pascalCase: true })] || '' | |
| ) | |
| ) : ( | |
| <iconfonts.IconFont name={icon} /> | |
| )} | |
| {!web() ? ( | |
| (() => { | |
| const IconComponent = iconfonts[camelCase(icon, { pascalCase: true })]; | |
| if (!IconComponent) { | |
| console.warn(`图标组件 ${icon} 不存在`); | |
| return null; | |
| } | |
| return <IconComponent />; | |
| })() | |
| ) : ( | |
| <iconfonts.IconFont name={icon} /> | |
| )} |
| {!web() ? ( | ||
| React.createElement( | ||
| iconfonts[ | ||
| camelCase(icon.name || '', { pascalCase: true }) | ||
| ], | ||
| { | ||
| className: `nut-icon-${icon['animation-name']} nut-icon-${icon['animation-time']}`, | ||
| } | ||
| ) | ||
| ) : ( | ||
| <iconfonts.IconFont | ||
| name={icon.name} | ||
| className={`nut-icon-${icon['animation-name']} nut-icon-${icon['animation-time']}`} | ||
| /> | ||
| )} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议优化条件渲染逻辑
当前的平台特定渲染逻辑可以进行以下改进：
- 使用类型断言可能不安全
- 动态组件创建逻辑较复杂
建议修改如下：
- {!web() ? (
- React.createElement(
- iconfonts[
- camelCase(icon.name || '', { pascalCase: true })
- ],
- {
- className: `nut-icon-${icon['animation-name']} nut-icon-${icon['animation-time']}`,
- }
- )
- ) : (
- <iconfonts.IconFont
- name={icon.name}
- className={`nut-icon-${icon['animation-name']} nut-icon-${icon['animation-time']}`}
- />
- )}
+ const iconClassName = `nut-icon-${icon['animation-name']} nut-icon-${icon['animation-time']}`
+ {!web() ? (
+ <IconComponent
+ name={icon.name}
+ className={iconClassName}
+ />
+ ) : (
+ <iconfonts.IconFont
+ name={icon.name}
+ className={iconClassName}
+ />
+ )}其中 IconComponent 是一个新的组件，用于处理动态图标创建：
const IconComponent: React.FC<{name: string; className: string}> = ({name, className}) => {
const IconElement = iconfonts[camelCase(name, { pascalCase: true })]
return <IconElement className={className} />
}| {(iconfonts.IconFontConfig as any).style.map((item: any) => { | ||
| return ( |
There was a problem hiding this comment.
💡 Codebase verification
🛠️ Refactor suggestion
Based on the analysis of the codebase, I can now provide the final response:
建议对 IconFontConfig 的使用添加类型定义和错误处理
- 当前代码中 IconFontConfig 被直接使用
as any类型转换，缺乏类型安全保障 - 没有对
style和data属性的存在性进行检查 - 缺少对无效数据的容错处理
建议添加以下改进：
interface IconStyle {
name: string;
icons: Array<{
name: string;
'animation-name'?: string;
'animation-time'?: string;
}>;
}
interface IconFontConfigType {
style: IconStyle[];
data: IconStyle[];
}
// 使用时添加类型检查和错误处理
{
(() => {
try {
const config = iconfonts.IconFontConfig as IconFontConfigType;
if (!Array.isArray(config?.style)) {
return null;
}
return config.style.map((item) => (
// ... 原有渲染逻辑
));
} catch (err) {
console.error('图标配置解析错误:', err);
return null;
}
})()
}🔗 Analysis chain
建议添加错误处理和类型检查
当前代码缺少对无效图标名称的错误处理和类型检查机制。
建议添加以下改进：
- 添加类型定义
- 添加错误边界处理
- 添加图标名称验证
interface IconConfig {
name: string;
icons: Array<{
name: string;
'animation-name': string;
'animation-time': string;
}>;
}
// 添加类型检查
const iconConfig = (iconfonts.IconFontConfig as any).style as IconConfig[];
if (!Array.isArray(iconConfig)) {
console.error('Invalid icon configuration');
return null;
}Let me gather more information about the IconFontConfig structure and its usage.
Let me check the IconFontConfig usage and error handling patterns in the icon package.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否存在类型定义文件
fd -e d.ts -e tsx "icon.*types?" src/packages/icon
# 检查是否有其他文件使用了类似的错误处理模式
rg "IconFontConfig.*style.*map" -A 5
Length of output: 975
Script:
#!/bin/bash
# Check the IconFontConfig definition and structure
rg -g "!*.d.ts" "IconFontConfig.*=|type.*IconFontConfig|interface.*IconFontConfig" -B 2 -A 5
# Check if there are any error handling patterns in icon related files
fd "icon" -e tsx -e ts | xargs rg "try.*catch|Error|throw|console\.(error|warn)"
# Look for any type definitions in icon package
ast-grep --pattern 'interface $_ {
$$$
}'
Length of output: 92277
Script:
#!/bin/bash
# Check IconFontConfig definition and usage
rg "IconFontConfig" -B 3 -A 3 src/packages/icon/
# Check if there are any error handling patterns in icon demos
rg "try|catch|error|throw" src/packages/icon/demos/
Length of output: 2811
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (2)
src/packages/icon/demos/taro/demo7.tsx (2)
Line range hint
13-22: 建议使用现代剪贴板 API当前复制功能使用了已废弃的
execCommandAPI，建议改用现代的 Clipboard API：- const copyTag = (text: string) => { - const input = document.createElement('input') - document.body.appendChild(input) - input.setAttribute('value', text) - input.select() - if (document.execCommand('copy')) { - document.execCommand('copy') - } - document.body.removeChild(input) - } + const copyTag = async (text: string) => { + try { + await navigator.clipboard.writeText(text) + } catch (err) { + console.error('复制失败:', err) + } + }
Line range hint
35-74: 建议提取样式定义当前的内联样式会导致代码难以维护和复用。建议将样式提取到单独的样式文件中：
// styles.ts export const containerStyle = { display: 'flex', flexWrap: 'wrap', padding: '0', width: '100%', } as const export const iconItemStyle = { maxWidth: '25%', height: '60px', display: 'flex', flex: '0 0 25%', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', } as const然后在组件中使用：
- <View - style={{ - display: 'flex', - flexWrap: 'wrap', - padding: '0', - width: '100%', - }} - > + <View style={containerStyle}>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (4)
src/packages/icon/demo.taro.tsx(2 hunks)src/packages/icon/demos/taro/demo3.tsx(1 hunks)src/packages/icon/demos/taro/demo6.tsx(4 hunks)src/packages/icon/demos/taro/demo7.tsx(4 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- src/packages/icon/demo.taro.tsx
- src/packages/icon/demos/taro/demo3.tsx
- src/packages/icon/demos/taro/demo6.tsx
🔇 Additional comments (2)
src/packages/icon/demos/taro/demo7.tsx (2)
2-4: 导入语句的改进符合最佳实践
使用命名空间导入（* as iconfonts）替代具体导入是一个很好的改进，这样可以：
- 减少导入语句的维护成本
- 避免频繁修改导入列表
- 使动态图标组件的创建更加灵活
31-32: 类型安全问题仍然存在
参考之前的评审建议，需要添加适当的类型定义和错误处理。
🤔 这个变动的性质是？
Summary by CodeRabbit
AnimatingNumbers、CountDown、Indicator、Pagination、Price、Swiper和TrendArrow。@nutui/icons-react-taro的版本至^2.0.1。