skills.rest
wepn13232
wepn13232COMMUNITY
Explore all skills by this author →
GitHub

element-plus-icon

Document Element Plus el-icon color, size, and slot attributes.

7|Updated Mar 31, 2026
Search Tags:#api-reference#element-plus#ui-component#el-icon#component-guide#icon-attributes
One-click install
npx skills add https://github.com/wepn13232/element-plus-skills --skill element-plus-icon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: element-plus-icon
Source: https://github.com/wepn13232/element-plus-skills/tree/main/icon
Command: npx skills add https://github.com/wepn13232/element-plus-skills --skill element-plus-icon

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers often need quick answers for el-icon styling, sizing, and slot options without wading through the full Element Plus docs, so they can deliver polished interfaces faster.

Core Features & Use Cases

  • Attribute Reference: Lists the color and size attributes with type hints and default behaviors to clarify how icons inherit styling.
  • Slot Usage: Notes the default slot for customizing icon content, making it easy to swap or wrap SVG elements.
  • Use Case: When building a toolbar, consult this guide to balance icon sizes and colors consistently across multiple buttons without opening multiple web pages.

Quick Start

Request the el-icon attributes and slot guidance to quickly integrate tailored icons into a new UI component.

Frequently Asked Questions about element-plus-icon

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

FAQPage Schema
How do I change el-icon size and color in Element Plus?▼

To change el-icon size and color in Element Plus, use the dedicated size and color attributes. This guide details their type hints and default behaviors to clarify how icons inherit styling.

Can I use custom SVG elements inside el-icon?▼

Yes, you can use custom SVG elements inside el-icon via its default slot. This slot makes it easy to swap or wrap SVG elements, allowing flexible customization of icon content within your UI components.

What is the default behavior for el-icon attributes?▼

The default behavior for el-icon attributes determines how icons inherit styling when explicit values are not provided. Consulting this API guide clarifies these defaults for reliable implementation without opening multiple web pages.

How do I balance icon sizes consistently across multiple Element Plus buttons?▼

To balance icon sizes consistently across multiple Element Plus buttons, consult the el-icon attribute reference. It details size and color attributes, enabling consistent styling across toolbar components for polished interfaces.

Does the el-icon component support slot usage for wrapping content?▼

Yes, the el-icon component supports slot usage for wrapping content through its default slot. This feature allows you to easily swap or wrap SVG elements when building toolbars or other UI components.

Related Skills

Explore More Software Engineering Skills→
jiaiyanjiaiyan
21

el-icon

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

Community
Basic
jiaiyanjiaiyan
8

n-icon

Display and customize SVG icons with size, color, and depth in Vue/Nuive UI projects.

Community
Intermediate
wepn13232wepn13232
7

element-plus-button

Reference el-button attributes, slots, exposes, and button-group controls.

Community
Basic
wepn13232wepn13232
7

element-plus-card

Document Element Plus el-card attributes, slots, and styling patterns.

Community
Basic