Icon 图标 |
您所在的位置:网站首页 › 常用网站图标有哪些图片大全 › Icon 图标 |
Icon 图标 # Element Plus 提供了一套常用的图标集合。 使用图标 #如果你想像用例一样直接使用,你需要全局注册组件,才能够直接在项目里使用。 如若需要查看所有可用的 SVG 图标请查阅 @element-plus/[email protected]@element-plus/icons-vue@latest 和有关 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-vue' const 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 # 使用 jsDelivr #TIP 我们建议使用 CDN 引入 Element Plus 的用户在链接地址上锁定版本,以免将来 Element Plus 升级时受到非兼容性更新的影响。 锁定版本的方法请查看 unpkg.com。 自动导入 #使用 unplugin-icons 和 unplugin-auto-import 从 iconify 中自动导入任何图标集。 您可以参考此模板。 基础用法 #WARNING 因为 HTML 标准已经定义了一个名为 menu 的标签, 如果您注册的 menu 无法正常工作,您需要使用别名来渲染图标。 结合 el-icon 使用 #el-icon 为 raw SVG 图标提供额外的属性, 提供的详细属性请继续阅读。 with extra class is-loading, your icon is able to rotate 360 deg in 2 seconds, you can also override this Search通过添加额外的类名 is-loading,你的图标就可以在 2 秒内旋转 360 度,当然你也可以自己改写想要的动画。 直接使用 SVG 图标 # 图标集合 #TIP 只要你安装了 @element-plus/icons-vue,就可以在任意版本里使用 SVG 图标。 您可以点击图标复制代码。 Copy SVG contentCopy icon codeSystemPlusMinusCirclePlusSearchFemaleMaleAimHouseFullScreenLoadingLinkServicePointerStarNotificationConnectionChatDotRoundSettingClockPositionDiscountOdometerChatSquareChatRoundChatLineRoundChatLineSquareChatDotSquareViewHideUnlockLockRefreshRightRefreshLeftRefreshBellMuteNotificationUserCheckCircleCheckWarningCircleCloseClosePieChartMoreCompassFilterSwitchSelectSemiSelectCloseBoldEditPenEditMessageMessageBoxTurnOffFinishedDeleteCropSwitchButtonOperationOpenRemoveZoomOutZoomInInfoFilledCircleCheckFilledSuccessFilledWarningFilledCircleCloseFilledQuestionFilledWarnTriangleFilledUserFilledMoreFilledToolsHomeFilledMenuUploadFilledAvatarHelpFilledShareStarFilledCommentHistogramGridPromotionDeleteFilledRemoveFilledCirclePlusFilledArrowArrowLeftArrowUpArrowRightArrowDownArrowLeftBoldArrowUpBoldArrowRightBoldArrowDownBoldDArrowRightDArrowLeftDownloadUploadTopBottomBackRightTopRightTopLeftBottomRightBottomLeftSortSortUpSortDownRankCaretLeftCaretTopCaretRightCaretBottomDCaretExpandFoldDocumentDocumentAddDocumentNotebookTicketsMemoCollectionPostcardScaleToOriginalSetUpDocumentDeleteDocumentCheckedDataBoardDataAnalysisCopyDocumentFolderCheckedFilesFolderFolderDeleteFolderRemoveFolderOpenedDocumentCopyDocumentRemoveFolderAddFirstAidKitReadingDataLineManagementCheckedTicketFailedTrendChartsListMediaMicrophoneMuteMicVideoPauseVideoCameraVideoPlayHeadsetMonitorFilmCameraPicturePictureRoundedIphoneCellphoneVideoCameraFilledPictureFilledPlatformCameraFilledBellFilledTrafficLocationLocationInformationDeleteLocationCoordinateBicycleOfficeBuildingSchoolGuideAddLocationMapLocationPlaceLocationFilledVanFoodWatermelonPearNoSmokingSmokingMugGobletSquareFullGobletFullKnifeForkSugarBowlMilkTeaLollipopCoffeeChickenDishIceTeaColdDrinkCoffeeCupDishDotIceDrinkIceCreamDessertIceCreamSquareForkSpoonIceCreamRoundFoodHotWaterGrapeFriesAppleBurgerGobletGobletSquareOrangeCherryItemsPrinterCalendarCreditCardBoxMoneyRefrigeratorCpuFootballBrushSuitcaseSuitcaseLineUmbrellaAlarmClockMedalGoldMedalPresentMouseWatchQuartzWatchMagnetHelpSoccerToiletPaperReadingLampPaperclipMagicStickBasketballBaseballCoinGoodsSellSoldOutKeyShoppingCartShoppingCartFullShoppingTrolleyPhoneScissorHandbagShoppingBagTrophyTrophyBaseStopwatchTimerCollectionTagTakeawayBoxPriceTagWalletOpportunityPhoneFilledWalletFilledGoodsFilledFlagBrushFilledBriefcaseStampWeatherSunriseSunnyShipMostlyCloudyPartlyCloudySunsetDrizzlingPouringCloudyMoonMoonNightLightningOtherChromeFilledElemeElemeFilledElementPlusShopSwitchFilledWindPowerAPI #Attributes #属性名说明类型默认值colorsvg 的 fill 颜色string继承颜色sizeSVG 图标的大小,size x sizenumber / string继承字体大小Slots #名称说明default自定义默认内容源代码 #组件 • 文档 贡献者 # 三咲智子 jeremywu 云游君 btea qiang 赵添 Xc zhangenming 류한경 Delyan Haralanov M5 Universe zwgwf on the field of hope zazzaz Hades-li dopamine basonwoo Kevin.Liao iamkun Wisdom kooriookami |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |