Skip to content

fix(icon-saas): add icons of batch4 #3955

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
zzcr merged 10 commits into from
Jan 4, 2026
Merged

fix(icon-saas): add icons of batch4 #3955

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
0d38b54
fix(icon-saas): remove batch3 icons
shenjunjian Dec 30, 2025
4033815
fix(icon-saas): add batch4 icons
shenjunjian Dec 30, 2025
4d755c2
fix(icon-saas): 为所有的AI图标，添加共同的ai 前缀
shenjunjian Dec 30, 2025
7492587
fix(icon-saas): 重命名几个重名的图标。 radio是保留原来的，只增fill图标
shenjunjian Dec 30, 2025
66597d6
fix(icon-saas): 复制新图标到svgs目录
shenjunjian Dec 30, 2025
c18b433
fix(icon-saas): 构建编译后的icon js文件
shenjunjian Dec 30, 2025
9ed4ceb
fix(icon-saas): 修改错误的颜色， 补充demo
shenjunjian Dec 30, 2025
5d19ba5
fix(icon-saas): remove fill='none'
shenjunjian Dec 30, 2025
0c2f40b
fix(icon-saas): 手工修改radio图标
shenjunjian Dec 30, 2025
fbfa7a9
fix(icon-saas): 移除拷贝后的fill=none
shenjunjian Dec 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
104 changes: 103 additions & 1 deletion examples/sites/demos/pc/app/icon/advance-icons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -402,11 +402,113 @@ export const batch3Icons = [
'IconTermination',
'IconTimezone',
'IconTrain',
'IconTransfer',
'IconTransferInventoryList',
'IconTransferringInventoryListsAcrossOrganizations',
'IconTransportation',
'IconTruck',
'IconWaybill',
'IconWorkOvertime'
]

export const batch4Icons = [
'IconAIAbout',
'IconAIApplication',
'IconAIBrowsingHistory',
'IconAICalendar',
'IconAIComputingPowerAIPolicy',
'IconAIConferenceManagement',
'IconAIDocument',
'IconAIDocumentQA',
'IconAIExternalKnowledgeAnswer',
'IconAIFindRecords',
'IconAIFollowUp',
'IconAIGCPainting',
'IconAIImageBasedTextRecognition',
'IconAIInformation',
'IconAIInternalKnowledgeAnswers',
'IconAIITServiceQA',
'IconAILabelExtraction',
'IconAIMemorySpace',
'IconAIOfficeDataSearch',
'IconAIOrganization',
'IconAIPosting',
'IconAIProcessQA',
'IconAIQuestion',
'IconAIReading',
'IconAISearch',
'IconAISearchPeople',
'IconAISearchQA',
'IconAISmartLookup',
'IconAISmartNotes',
'IconAISmartTranslation',
'IconAITakingPhotos',
'IconAITechnicalInsightsQA',
'IconAITerminologyQA',
'IconAITranslation',
'IconAIUCDSearch',
'IconAIWebQA',
'IconAIWrite',
'IconAIWriting',
'IconAnalysisTypeContainer',
'IconAnchor',
'IconApprovalFlow',
'IconAvatar',
'IconBadge',
'IconButtonBar',
'IconCalendarView',
'IconCardGroup',
'IconCardTemplate',
'IconCarousel',
'IconCascader',
'IconChart',
'IconCheckbox',
'IconChooser',
'IconCreatePage',
'IconDetailsTemplatePage',
'IconDialogSelect',
'IconFilterView',
'IconFloating',
'IconFlowchart',
'IconFoldingPanelContainers',
'IconForm',
'IconGeneralPage',
'IconGrid',
'IconImage',
'IconInput',
'IconListSheet',
'IconMetAlert',
'IconMultiColumnContainer',
'IconMultipleContainerGroups',
'IconNavigationContainer',
'IconNumber',
'IconNumeric',
'IconObjectInfo',
'IconPageLoader',
'IconPager',
'IconProcessOverview',
'IconProgress',
'IconRadio',
'IconRecord',
'IconRuleBuilder',
'IconSelection',
'IconSelectView',
'IconShortcut',
'IconSlider',
'IconSliderButton',
'IconSplitPanelContainer',
'IconSpreadGrid',
'IconStandardList',
'IconSteps',
'IconSwitch',
'IconSwitchCard',
'IconTabContainer',
'IconTabs',
'IconTag',
'IconTagGroup',
'IconTimeLine',
'IconTimePicker',
'IconTitleContainer',
'IconTransfer',
'IconTree',
'IconTreeMenuContainer'
]
Comment on lines +413 to +514
Copy link

@coderabbitai coderabbitai bot Dec 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

# First, verify the file exists and check the lines mentioned
ls -la examples/sites/demos/pc/app/icon/advance-icons.js

Repository: opentiny/tiny-vue

Length of output: 160

🏁 Script executed:

# Find the @opentiny/vue-icon package
find . -type d -name "vue-icon" | grep -E "packages|node_modules" | head -10

Repository: opentiny/tiny-vue

Length of output: 80

🏁 Script executed:

# Check for icon definitions or exports in the repository
find . -type f -name "*.js" -o -name "*.ts" | xargs grep -l "IconAI" | head -5

Repository: opentiny/tiny-vue

Length of output: 300

🏁 Script executed:

# Explore the vue-icon package structure
ls -la packages/vue-icon/

Repository: opentiny/tiny-vue

Length of output: 483

🏁 Script executed:

# Check for index or main export file in vue-icon
find packages/vue-icon -name "index.*" -o -name "main.*" | head -10

Repository: opentiny/tiny-vue

Length of output: 87

🏁 Script executed:

# List the structure of the vue-icon package
tree -L 3 packages/vue-icon/ 2>/dev/null || find packages/vue-icon -type d -not -path '*/.*' | head -20

Repository: opentiny/tiny-vue

Length of output: 12643

🏁 Script executed:

# Search for AI icons in packages/vue-icon/src
ls -la packages/vue-icon/src | grep "^-" | grep "a-i-"

Repository: opentiny/tiny-vue

Length of output: 43

🏁 Script executed:

# Check what's exported in the index.ts file - look for IconAI patterns
grep -o "Icon[A-Za-z]*" packages/vue-icon/index.ts | sort | grep "^IconAI" | head -20

Repository: opentiny/tiny-vue

Length of output: 43

🏁 Script executed:

# Count how many IconAI exports are in index.ts
grep -o "Icon[A-Za-z]*" packages/vue-icon/index.ts | grep "^IconAI" | wc -l

Repository: opentiny/tiny-vue

Length of output: 62

🏁 Script executed:

# Check what advance-icons.js imports
head -50 examples/sites/demos/pc/app/icon/advance-icons.js

Repository: opentiny/tiny-vue

Length of output: 1047

🏁 Script executed:

# Check the index.ts structure - peek at format
head -100 packages/vue-icon/index.ts | tail -50

Repository: opentiny/tiny-vue

Length of output: 2337

🏁 Script executed:

# Search for AI icons in vue-icon-saas
ls packages/vue-icon-saas/src | grep "a-i-" | wc -l

Repository: opentiny/tiny-vue

Length of output: 63

🏁 Script executed:

# List some AI icons in vue-icon-saas
ls packages/vue-icon-saas/src | grep "a-i-" | head -10

Repository: opentiny/tiny-vue

Length of output: 284

🏁 Script executed:

# Check if advance-icons.js has batch4Icons array
sed -n '400,520p' examples/sites/demos/pc/app/icon/advance-icons.js | head -50

Repository: opentiny/tiny-vue

Length of output: 1210

🏁 Script executed:

# Count total AI icons in vue-icon-saas
ls packages/vue-icon-saas/src | grep "a-i-" | wc -l

Repository: opentiny/tiny-vue

Length of output: 63

🏁 Script executed:

# Get full list of AI icons from vue-icon-saas
ls packages/vue-icon-saas/src | grep "a-i-" | sort

Repository: opentiny/tiny-vue

Length of output: 861

🏁 Script executed:

# Get the full batch4Icons array
sed -n '/^export const batch4Icons = \[/,/^\]/p' examples/sites/demos/pc/app/icon/advance-icons.js | grep -o "Icon[A-Za-z]*" | wc -l

Repository: opentiny/tiny-vue

Length of output: 64

🏁 Script executed:

# Get the full list of batch4Icons to count and analyze
sed -n '/^export const batch4Icons = \[/,/^\]/p' examples/sites/demos/pc/app/icon/advance-icons.js | grep -o "Icon[A-Za-z]*"

Repository: opentiny/tiny-vue

Length of output: 1697

🏁 Script executed:

# Check how advance-icons.js uses these icons
grep -n "Svgs\|import\|from" examples/sites/demos/pc/app/icon/advance-icons.js | head -30

Repository: opentiny/tiny-vue

Length of output: 43

🏁 Script executed:

# Check the very top of advance-icons.js for imports
head -20 examples/sites/demos/pc/app/icon/advance-icons.js

Repository: opentiny/tiny-vue

Length of output: 455

🏁 Script executed:

# Check for non-AI icons from batch4Icons in packages/vue-icon/src
# Test a few: IconAnalysisTypeContainer, IconAnchor, IconApprovalFlow, IconAvatar
for icon in "analysis-type-container" "anchor" "approval-flow" "avatar"; do
  if [ -f "packages/vue-icon/src/${icon}.ts" ]; then
    echo "✓ ${icon}.ts exists"
  else
    echo "✗ ${icon}.ts NOT found"
  fi
done

Repository: opentiny/tiny-vue

Length of output: 172

🏁 Script executed:

# Check if Svgs object is created by mapping from an icon package
grep -n "Svgs\|import.*from.*icon" examples/sites/demos/pc/app/icon/advance-icons.js | head -20

Repository: opentiny/tiny-vue

Length of output: 43

🏁 Script executed:

# Check entire advance-icons.js file length and structure
wc -l examples/sites/demos/pc/app/icon/advance-icons.js

Repository: opentiny/tiny-vue

Length of output: 114

🏁 Script executed:

# Check if there are any imports or Svgs references
grep -E "^import|^const|^let|Svgs|from" examples/sites/demos/pc/app/icon/advance-icons.js | head -30

Repository: opentiny/tiny-vue

Length of output: 43

🏁 Script executed:

# Look at the end of the file to see if there's any Svgs definition
tail -50 examples/sites/demos/pc/app/icon/advance-icons.js

Repository: opentiny/tiny-vue

Length of output: 1034

🏁 Script executed:

# Search for where batch4Icons is used in the codebase
rg "batch4Icons" --type js --type ts | head -20

Repository: opentiny/tiny-vue

Length of output: 669

🏁 Script executed:

# Check the advance-usage.vue file to see how batch4Icons is used
cat examples/sites/demos/pc/app/icon/advance-usage.vue

Repository: opentiny/tiny-vue

Length of output: 5417

🏁 Script executed:

# Check the specific lines where batch4Icons is used
sed -n '1,50p' examples/sites/demos/pc/app/icon/advance-usage.vue

Repository: opentiny/tiny-vue

Length of output: 2032

🏁 Script executed:

# Search for Svgs reference and how icons are rendered
grep -n "Svgs\|icon-\|renderIcon\|:is=" examples/sites/demos/pc/app/icon/advance-usage.vue | head -30

Repository: opentiny/tiny-vue

Length of output: 369

🏁 Script executed:

# Check what @opentiny/vue-icon actually exports - search for all exported icon names
grep "^export" packages/vue-icon/index.ts | head -50

Repository: opentiny/tiny-vue

Length of output: 3027

🏁 Script executed:

# Count total exports in packages/vue-icon/index.ts
grep "^export" packages/vue-icon/index.ts | wc -l

Repository: opentiny/tiny-vue

Length of output: 64

🏁 Script executed:

# Check if batch4 icons are exported from @opentiny/vue-icon
# Check for specific AI icons in the export list
for icon in "IconAIAbout" "IconAnalysisTypeContainer" "IconAnchor"; do
  if grep -q "export.*$icon" packages/vue-icon/index.ts; then
    echo "✓ $icon is exported"
  else
    echo "✗ $icon is NOT exported"
  fi
done

Repository: opentiny/tiny-vue

Length of output: 163

🏁 Script executed:

# Check if there's a separate export for batch4Icons or vue-icon-saas integration
grep -r "batch4Icons\|vue-icon-saas" packages/vue-icon/ 2>/dev/null || echo "Not found in vue-icon package"

Repository: opentiny/tiny-vue

Length of output: 90

🏁 Script executed:

# Check if any of the batch4 non-AI icons exist in packages/vue-icon/src
# Test several from different parts of the array
for icon in "analysis-type-container" "anchor" "approval-flow" "avatar" "badge" "button-bar" "calendar-view"; do
  result=$(find packages/vue-icon/src -name "${icon}.ts" 2>/dev/null)
  if [ -n "$result" ]; then
    echo "✓ ${icon}.ts exists"
  else
    echo "✗ ${icon}.ts NOT found"
  fi
done

Repository: opentiny/tiny-vue

Length of output: 248

🏁 Script executed:

# Check if these icons exist in vue-icon-saas
for icon in "analysis-type-container" "anchor" "approval-flow" "avatar" "badge"; do
  result=$(find packages/vue-icon-saas/src -name "${icon}.ts" 2>/dev/null)
  if [ -n "$result" ]; then
    echo "✓ ${icon}.ts exists in vue-icon-saas"
  else
    echo "✗ ${icon}.ts NOT found in vue-icon-saas"
  fi
done

Repository: opentiny/tiny-vue

Length of output: 263

🏁 Script executed:

# Search the entire codebase for IconAnalysisTypeContainer or IconAnchor definitions
rg "IconAnalysisTypeContainer|IconAnchor" --type ts --type js | grep -E "export|declare|const" | head -10

Repository: opentiny/tiny-vue

Length of output: 403

🏁 Script executed:

# Verify ALL batch4Icons exist in vue-icon-saas by checking exports
grep "export.*Icon" packages/vue-icon-saas/index.ts | wc -l

Repository: opentiny/tiny-vue

Length of output: 64

🏁 Script executed:

# Check if all batch4 icons are exported from vue-icon-saas
# Extract batch4Icons and verify each one
sed -n '/^export const batch4Icons = \[/,/^\]/p' examples/sites/demos/pc/app/icon/advance-icons.js | \
  grep -o "'Icon[^']*'" | \
  sed "s/'//g" | \
  while read icon; do
    if grep -q "export.*$icon" packages/vue-icon-saas/index.ts; then
      echo "✓ $icon"
    else
      echo "✗ $icon NOT FOUND"
    fi
  done | grep "✗" | head -20

Repository: opentiny/tiny-vue

Length of output: 43

🏁 Script executed:

# Check if any batch4Icons are exported from @opentiny/vue-icon
sed -n '/^export const batch4Icons = \[/,/^\]/p' examples/sites/demos/pc/app/icon/advance-icons.js | \
  grep -o "'Icon[^']*'" | \
  sed "s/'//g" | \
  head -20 | \
  while read icon; do
    if grep -q "export.*$icon" packages/vue-icon/index.ts; then
      echo "✓ $icon (in @opentiny/vue-icon)"
    else
      echo "✗ $icon (NOT in @opentiny/vue-icon)"
    fi
  done

Repository: opentiny/tiny-vue

Length of output: 1076

🏁 Script executed:

# Double-check by searching entire packages/vue-icon/index.ts for any IconAI
grep "IconAI" packages/vue-icon/index.ts | head -5

Repository: opentiny/tiny-vue

Length of output: 43

🏁 Script executed:

# Verify that batch4 icons DO exist in vue-icon-saas
grep "IconAI" packages/vue-icon-saas/index.ts | wc -l

Repository: opentiny/tiny-vue

Length of output: 64

🏁 Script executed:

# Check if there's documentation or package.json that shows the relationship
cat packages/vue-icon-saas/package.json | head -20

Repository: opentiny/tiny-vue

Length of output: 582

🏁 Script executed:

# Final verification: Check if advance-usage.vue imports are correct
# and see if there's any aliasing or re-export happening
grep -A5 "import.*Svgs" examples/sites/demos/pc/app/icon/advance-usage.vue

Repository: opentiny/tiny-vue

Length of output: 161

🏁 Script executed:

# Check if @opentiny/vue-icon re-exports vue-icon-saas
grep -r "vue-icon-saas" packages/vue-icon/

Repository: opentiny/tiny-vue

Length of output: 43

🏁 Script executed:

# Verify the complete list - are ALL batch4 icons in vue-icon-saas?
# Test the last few to be sure
sed -n '/^export const batch4Icons = \[/,/^\]/p' examples/sites/demos/pc/app/icon/advance-icons.js | \
  grep -o "'Icon[^']*'" | \
  sed "s/'//g" | \
  tail -20 | \
  while read icon; do
    if grep -q "export.*$icon" packages/vue-icon-saas/index.ts; then
      echo "✓ $icon"
    else
      echo "✗ $icon"
    fi
  done

Repository: opentiny/tiny-vue

Length of output: 386

🏁 Script executed:

# Final comprehensive check: verify that batch4Icons icons are definitely not in @opentiny/vue-icon
# Get all 101 icons from batch4Icons and check them all
count=0
notfound=0
sed -n '/^export const batch4Icons = \[/,/^\]/p' examples/sites/demos/pc/app/icon/advance-icons.js | \
  grep -o "'Icon[^']*'" | \
  sed "s/'//g" | \
  while read icon; do
    if grep -q "export.*$icon[^a-zA-Z]" packages/vue-icon/index.ts; then
      echo "FOUND_IN_VUE_ICON: $icon"
    else
      echo "NOT_IN_VUE_ICON: $icon"
    fi
  done | sort | uniq -c

Repository: opentiny/tiny-vue

Length of output: 4193

🏁 Script executed:

# Confirm that the icons ARE in vue-icon-saas by checking first and last batch4 icons
for icon in "IconAIAbout" "IconTreeMenuContainer"; do
  if grep -q "export.*$icon[^a-zA-Z]" packages/vue-icon-saas/index.ts; then
    echo "✓ $icon IS in @opentiny/vue-icon-saas"
  else
    echo "✗ $icon NOT in @opentiny/vue-icon-saas"
  fi
done

Repository: opentiny/tiny-vue

Length of output: 158

Critical issue: batch4Icons references unavailable icons from @opentiny/vue-icon.

The advance-usage.vue file imports Svgs from @opentiny/vue-icon, but 100 of the 101 icons in batch4Icons are not exported from that package. Verification shows that while all icons exist in @opentiny/vue-icon-saas, they are unavailable from the imported package. The safe guards prevent crashes, but the icons will not render, breaking the UI functionality.

All 101 batch4Icons must either be exported from @opentiny/vue-icon or the import source must be changed to @opentiny/vue-icon-saas.

🤖 Prompt for AI Agents 
In examples/sites/demos/pc/app/icon/advance-icons.js around lines 413 to 514,
batch4Icons lists ~101 icons that are not exported by @opentiny/vue-icon (they
exist only in @opentiny/vue-icon-saas); update the import source in
advance-usage.vue to import Svgs from '@opentiny/vue-icon-saas' instead of
'@opentiny/vue-icon' so the icons resolve at runtime, or alternatively modify
the package exports to re-export these icons from @opentiny/vue-icon (prefer
changing the import to the saas package for minimal, immediate fix).

24 changes: 23 additions & 1 deletion examples/sites/demos/pc/app/icon/advance-usage-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,13 +72,35 @@
<span class="svgs-text" :title="name">{{ name }}</span>
</div>
</div>
<hr />
<div class="svgs-wrapper">
<div
v-for="name in batch4Icons"
:key="name"
:class="{
'svg-visible': searchName === '' || name.toLowerCase().includes(searchName.toLowerCase()),
'svgs-item': true
}"
@click="click(name)"
>
<component
:is="Svgs[name] && Svgs[name]()"
class="svgs-icon"
:first-color="firstColor"
:second-color="secondColor"
:shape="shape"
:underlay="isUnderlay ? underlay : null"
></component>
<span class="svgs-text" :title="name">{{ name }}</span>
</div>
</div>
</div>
</template>

<script setup lang="js">
import Svgs from '@opentiny/vue-icon'
import { TinyForm, TinyFormItem, TinyModal, TinyInput, TinyRadioGroup, TinyRadio, TinySwitch } from '@opentiny/vue'
import { advanceIcons, batch3Icons } from './advance-icons.js'
import { advanceIcons, batch3Icons, batch4Icons } from './advance-icons.js'
import { getCurrentInstance, ref, watch } from 'vue'

const searchName = ref('')
Expand Down
25 changes: 24 additions & 1 deletion examples/sites/demos/pc/app/icon/advance-usage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,28 @@
<span class="svgs-text" :title="name">{{ name }}</span>
</div>
</div>
<hr />
<div class="svgs-wrapper">
<div
v-for="name in batch4Icons"
:key="name"
:class="{
'svg-visible': searchName === '' || name.toLowerCase().includes(searchName.toLowerCase()),
'svgs-item': true
}"
@click="click(name)"
>
<component
:is="Svgs[name] && Svgs[name]()"
class="svgs-icon"
:first-color="firstColor"
:second-color="secondColor"
:shape="shape"
:underlay="isUnderlay ? underlay : null"
></component>
<span class="svgs-text" :title="name">{{ name }}</span>
</div>
</div>
</div>
</template>

Expand All @@ -87,7 +109,7 @@ import {
TinyColorPicker,
TinySwitch
} from '@opentiny/vue'
import { advanceIcons, batch3Icons } from './advance-icons.js'
import { advanceIcons, batch3Icons, batch4Icons } from './advance-icons.js'

export default {
components: {
Expand All @@ -104,6 +126,7 @@ export default {
Svgs,
advanceIcons,
batch3Icons,
batch4Icons,
searchName: '',
shape: 'line',
firstColor: '#0067D1',
Expand Down
4 changes: 4 additions & 0 deletions packages/theme-saas/src/svgs-raw/IconAIAbout.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions packages/theme-saas/src/svgs-raw/IconAIAboutFilled.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading