Skip to content

refactor: Replace element ui icons with inhouse SVGs#163

Open
KapilSachdev wants to merge 3 commits into
apache:gh-pagesfrom
KapilSachdev:refactor/add-svg-sprite
Open

refactor: Replace element ui icons with inhouse SVGs#163
KapilSachdev wants to merge 3 commits into
apache:gh-pagesfrom
KapilSachdev:refactor/add-svg-sprite

Conversation

@KapilSachdev
Copy link
Copy Markdown

Unified SVG Icon System

Problem

echarts-examples currently manages SVG icons using two approaches:

  • element-ui CSS class-based icons (el-icon-*)
  • Hand-crafted inline SVG elements and standalone SVG files (e.g. sidebar chart list)
<!-- element-ui (Vue 2) -->
<i class="el-icon-edit"></i>
<el-button type="primary" icon="el-icon-edit">Edit</el-button>

As element-ui is Vue 2 only, migrating to element-plus drops the class-based icon API entirely (part of the larger Vue 3 migration #124 ).

<!-- element-plus (Vue 3) -->
<el-icon><Edit /></el-icon>
<Edit />

Rather than adopting element-plus icons and adding yet another icon library, this is a good moment to consolidate.

Why Not an Icon Library?

The project uses several chart-specific icons that have no equivalent in standard icon libraries (Font Awesome, etc.). Using element-plus icons or any other external library would mean maintaining the current hybrid approach.

Solution

  • Consolidate all icons into hand-crafted SVGs
  • Additionally built into a single SVG sprite file.

What This PR Does

  • Removes dependency on element-ui class-based icons
  • Adds new SVG icons to keep feature parity for removed icons
  • Introduces SVG sprite build
  • Updates all icon usages across the project to use the new sprite approach

@KapilSachdev KapilSachdev force-pushed the refactor/add-svg-sprite branch from 1b7e7a5 to 6928fc8 Compare June 2, 2026 12:12
@KapilSachdev KapilSachdev marked this pull request as ready for review June 2, 2026 12:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant