青海宾馆网站建设公司,做外贸的免费网站,wordpress批量 添加别名,无锡模板建站Element Plus 提供了一套常用的图标集合。
使用图标# 如果你想像用例一样直接使用#xff0c;你需要全局注册组件#xff0c;才能够直接在项目里使用。 如若需要查看所有可用的 SVG 图标请查阅 element-plus/icons-vue1.xelement-plus/icons-vuelatest 和有关 Icon Collect…Element Plus 提供了一套常用的图标集合。
使用图标# 如果你想像用例一样直接使用你需要全局注册组件才能够直接在项目里使用。 如若需要查看所有可用的 SVG 图标请查阅 element-plus/icons-vue1.xelement-plus/icons-vuelatest 和有关 Icon Collection 的源码 element-plus-icons
安装#
使用包管理器#
# 选择一个你喜欢的包管理器# NPM
$ npm install element-plus/icons-vue
# Yarn
$ yarn add element-plus/icons-vue
# pnpm
$ pnpm install element-plus/icons-vue注册所有图标#
您需要从 element-plus/icons-vue 中导入所有图标并进行全局注册。
// main.ts// 如果您正在使用CDN引入请删除下面一行。
import * as ElementPlusIconsVue from element-plus/icons-vueconst app createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}您也可以参考 此模板。
浏览器直接引入#
直接通过浏览器的 HTML 标签导入 Element Plus然后就可以使用全局变量 ElementPlusIconsVue了。
根据不同的 CDN 提供商有不同的引入方式 根据不同的 CDN 提供商有不同的引入方式 我们在这里以 unpkg 和 jsDelivr 举例。 你也可以使用其它的 CDN 供应商。
使用 unpkg#
script src//unpkg.com/element-plus/icons-vue/script使用 jsDelivr#
script src//cdn.jsdelivr.net/npm/element-plus/icons-vue/scriptTIP
我们建议使用 CDN 引入 Element Plus 的用户在链接地址上锁定版本以免将来 Element Plus 升级时受到非兼容性更新的影响。 锁定版本的方法请查看 unpkg.com。
自动导入#
使用 unplugin-icons 和 unplugin-auto-import 从 iconify 中自动导入任何图标集。 您可以参考此模板。
基础用法#
WARNING
因为 HTML 标准已经定义了一个名为 menu 的标签 如果您注册的 menu 无法正常工作您需要使用别名来渲染图标。
!-- 使用 el-icon 为 SVG 图标提供属性 --
templatedivel-icon :sizesize :colorcolorEdit //el-icon!-- 或者独立使用它不从父级获取属性 --Edit //div
/template结合 el-icon 使用#
el-icon 为 raw SVG 图标提供额外的属性, 提供的详细属性请继续阅读。
templatepwith extra class bis-loading/b, your icon is able to rotate 360 deg in 2seconds, you can also override this/pel-icon :size20Edit //el-iconel-icon color#409EFC classno-inheritShare //el-iconel-iconDelete //el-iconel-icon classis-loadingLoading //el-iconel-button typeprimaryel-icon stylevertical-align: middleSearch //el-iconspan stylevertical-align: middle Search /span/el-button
/template通过添加额外的类名 is-loading你的图标就可以在 2 秒内旋转 360 度当然你也可以自己改写想要的动画。 直接使用 SVG 图标#
templatediv stylefont-size: 20px!-- 由于SVG图标默认不携带任何属性 --!-- 你需要直接提供它们 --Edit stylewidth: 1em; height: 1em; margin-right: 8px /Share stylewidth: 1em; height: 1em; margin-right: 8px /Delete stylewidth: 1em; height: 1em; margin-right: 8px /Search stylewidth: 1em; height: 1em; margin-right: 8px //div
/template图标集合#
TIP
只要你安装了 element-plus/icons-vue就可以在任意版本里使用 SVG 图标。
您可以点击图标复制代码。
Copy SVG contentCopy icon code
System
PlusMinusCirclePlusSearchFemaleMaleAimHouseFullScreenLoadingLinkServicePointerStarNotificationConnectionChatDotRoundSettingClockPositionDiscountOdometerChatSquareChatRoundChatLineRoundChatLineSquareChatDotSquareViewHideUnlockLockRefreshRightRefreshLeftRefreshBellMuteNotificationUserCheckCircleCheckWarningCircleCloseClosePieChartMoreCompassFilterSwitchSelectSemiSelectCloseBoldEditPenEditMessageMessageBoxTurnOffFinishedDeleteCropSwitchButtonOperationOpenRemoveZoomOutZoomInInfoFilledCircleCheckFilledSuccessFilledWarningFilledCircleCloseFilledQuestionFilledWarnTriangleFilledUserFilledMoreFilledToolsHomeFilledMenuUploadFilledAvatarHelpFilledShareStarFilledCommentHistogramGridPromotionDeleteFilledRemoveFilledCirclePlusFilled
Arrow
ArrowLeftArrowUpArrowRightArrowDownArrowLeftBoldArrowUpBoldArrowRightBoldArrowDownBoldDArrowRightDArrowLeftDownloadUploadTopBottomBackRightTopRightTopLeftBottomRightBottomLeftSortSortUpSortDownRankCaretLeftCaretTopCaretRightCaretBottomDCaretExpandFold
Document
DocumentAddDocumentNotebookTicketsMemoCollectionPostcardScaleToOriginalSetUpDocumentDeleteDocumentCheckedDataBoardDataAnalysisCopyDocumentFolderCheckedFilesFolderFolderDeleteFolderRemoveFolderOpenedDocumentCopyDocumentRemoveFolderAddFirstAidKitReadingDataLineManagementCheckedTicketFailedTrendChartsList
Media
MicrophoneMuteMicVideoPauseVideoCameraVideoPlayHeadsetMonitorFilmCameraPicturePictureRoundedIphoneCellphoneVideoCameraFilledPictureFilledPlatformCameraFilledBellFilled
Traffic
LocationLocationInformationDeleteLocationCoordinateBicycleOfficeBuildingSchoolGuideAddLocationMapLocationPlaceLocationFilledVan
Food
WatermelonPearNoSmokingSmokingMugGobletSquareFullGobletFullKnifeForkSugarBowlMilkTeaLollipopCoffeeChickenDishIceTeaColdDrinkCoffeeCupDishDotIceDrinkIceCreamDessertIceCreamSquareForkSpoonIceCreamRoundFoodHotWaterGrapeFriesAppleBurgerGobletGobletSquareOrangeCherry
Items
PrinterCalendarCreditCardBoxMoneyRefrigeratorCpuFootballBrushSuitcaseSuitcaseLineUmbrellaAlarmClockMedalGoldMedalPresentMouseWatchQuartzWatchMagnetHelpSoccerToiletPaperReadingLampPaperclipMagicStickBasketballBaseballCoinGoodsSellSoldOutKeyShoppingCartShoppingCartFullShoppingTrolleyPhoneScissorHandbagShoppingBagTrophyTrophyBaseStopwatchTimerCollectionTagTakeawayBoxPriceTagWalletOpportunityPhoneFilledWalletFilledGoodsFilledFlagBrushFilledBriefcaseStamp
Weather
SunriseSunnyShipMostlyCloudyPartlyCloudySunsetDrizzlingPouringCloudyMoonMoonNightLightning
Other
ChromeFilledElemeElemeFilledElementPlusShopSwitchFilledWindPower
API#
Attributes#
属性名说明类型默认值colorsvg 的 fill 颜色string继承颜色sizeSVG 图标的大小size x sizenumber / string继承字体大小
Slots#
名称说明default自定义默认内容
源代码#
组件 • 文档
