el-icon

Name: el-icon
Availability: InStock
Author: jiaiyan

Create reusable SVG icon components for Element Plus with size and color props.

21|2|Updated Mar 13, 2026

Search Tags:#ui #vue #svg #icon #iconography #element-plus

Ready to run

npx skills add https://github.com/jiaiyan/element-plus-skills --skill el-icon

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: el-icon
Source: https://github.com/jiaiyan/element-plus-skills/tree/main/components/el-icon
Command: npx skills add https://github.com/jiaiyan/element-plus-skills --skill el-icon

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Icon rendering across components can be inconsistent, making UI feel fragmented. This skill provides a reusable el-icon component to standardize appearance and simplify theming.

Core Features & Use Cases

Consistent sizing: uniform icon size across the app.
Color customization: adjust icon color via props to match themes.
Seamless integration: works with the Element Plus icon collection and can be composed with other components (e.g., el-button).

Quick Start

Render an SVG icon with a specified size and color using the el-icon component.

Frequently Asked Questions about el-icon

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I standardize SVG icon sizing and color in Vue?▼

You can standardize SVG icon rendering in Vue by using a reusable wrapper component that exposes props for uniform sizing and color customization across your application.

Why do my Element Plus icons render inconsistently across UI components?▼

Element Plus icons render inconsistently when individual components manage their own SVG properties. A dedicated icon wrapper resolves this by applying uniform size and theme color globally.

Can I use custom colors and sizes for Element Plus icons in Vue panels?▼

Yes, you can adjust icon colors and sizes for Vue panels and headers by passing specific props to the SVG icon wrapper component, ensuring it matches your application theme.

What is the best way to compose SVG icons with buttons in Element Plus?▼

The best way to compose SVG icons with buttons in Element Plus is using a dedicated wrapper component that integrates seamlessly with the el-button element to ensure uniform appearance.

Does the Element Plus icon collection require a specific wrapper for Vue applications?▼

While not strictly required, using a dedicated Vue wrapper component for the Element Plus icon collection ensures consistent SVG sizing and color theming across your application UI.