Icons β
Solutions β
The system does not actually integrate the Element Plus icon library because Iconify is already included.
- Iconify Icons (Recommended)
- Using Alibaba Icon Library
Using Iconify Icons β
Note
Iconify is a universal icon framework that includes icon collections such as FontAwesome, Material Design Icons, DashIcons, Feather Icons, EmojiOne, Noto Emoji, and more.
It contains over 150 icon sets and 200k icons, supporting many frontend frameworks.
To search for icons, it is generally recommended to use IcΓ΄nes, an online icon search website based on Iconify, which offers a better user experience.
Attention
The copied icon format is: i-{collection-name}:{icon-name}
Using the MaSvgIcon Component β
After finding the icon, copy its name and display it using the MaSvgIcon component:
<!-- Paste the copied icon name into the name attribute -->
<ma-svg-icon name="i-vscode-icons:file-type-php" />Using with Class β
You can use it directly via HTML tags. However, note that asynchronous and concatenated string usage is not supported.
<span class="i-vscode-icons:file-type-php" />
<i class="i-vscode-icons:file-type-php" />Offline Mode β
By default, Iconify icons are served online. The first call triggers an external network request to fetch the SVG raw data, which is then cached in localStorage. Subsequent calls retrieve and display the icon directly from the cache. However, without an internet connection, the icons may not display properly.
To address this, the system provides a command: pnpm run gen:icons. Follow the command prompts to select the icon sets you need and choose the offline mode option to generate an offline icon library.
Note
The offline icon library generated by the command is also the collection displayed in the icon picker.
Using Alibaba Icon Library β
Place SVG icon files downloaded from the Alibaba Icon Library or other sources into the ./src/assets/icons/ directory and use them via the MaSvgIcon component:
<!-- SVG icon file path: ./src/assets/icons/newIcon.svg -->
<ma-svg-icon name="newIcon" />