1. 简介
@ant-design/icons-react是Ant Design图标库的React版本，它包含了一系列的图标，可轻松地用于React应用中，且具有非常好的定制性。
2. 安装
使用npm安装：
npm install @ant-design/icons-react --save
3. 使用
3.1. 引入图标
通过导入图标，您可以在React组件中使用Ant Design图标。以下是一个例子：
import { SmileOutlined } from '@ant-design/icons-react';
const Example = () => (
<div>
<SmileOutlined />
</div>
);3.2. 定制图标
您可以使用@ant-design/icons-react中的一些工具，定制您的图标，以满足您的需求。
3.2.1. 图标旋转
通过使用rotate属性，您可以旋转图标。以下是一个例子：
import { SmileOutlined } from '@ant-design/icons-react';
const Example = () => (
<div>
<SmileOutlined rotate={45} />
</div>
);3.2.2. 图标颜色
通过使用style属性，您可以修改图标的颜色。以下是一个例子：
import { SmileOutlined } from '@ant-design/icons-react';
const Example = () => (
<div>
<SmileOutlined style={{ color: 'red' }} />
</div>
);3.2.3. 图标大小
通过使用style属性，您可以修改图标的大小。以下是一个例子：
import { SmileOutlined } from '@ant-design/icons-react';
const Example = () => (
<div>
<SmileOutlined style={{ fontSize: '30px' }} />
</div>
);3.3. 图标列表
@ant-design/icons-react包含了大量的图标，这里列出了一些：
- AccountBookOutlined
- AimOutlined
- AlertOutlined
- AlibabaOutlined
- AliwangwangOutlined
- AmazonOutlined
- AndroidOutlined
- AntCloudOutlined
- AntDesignOutlined
- ApartmentOutlined
- ApiOutlined
- AppleOutlined
- AppstoreAddOutlined
- AudioOutlined
- AuditOutlined
- BackwardOutlined
- BankOutlined
- BarChartOutlined
- BarcodeOutlined
- BarsOutlined
- BehanceOutlined
- BellOutlined
- BgColorsOutlined
- BlockOutlined
- BoldOutlined
- BookOutlined
- BorderBottomOutlined
- BorderHorizontalOutlined
- BorderInnerOutlined
- BorderLeftOutlined
- BorderOuterOutlined
- BorderRightOutlined
- BorderTopOutlined
- BorderVerticleOutlined
- BoxPlotOutlined
- BranchesOutlined
- BugOutlined
- BuildOutlined
- BulbOutlined
- CalculatorOutlined
- CalendarOutlined
- CameraOutlined
- CarOutlined
- CarryOutOutlined
- CheckCircleOutlined
- CheckOutlined
- CheckSquareOutlined
- ChromeOutlined
- CiCircleOutlined
- CiOutlined
- ClearOutlined
- ClockCircleOutlined
- CloseCircleOutlined
- CloseOutlined
- CloseSquareOutlined
- CloudDownloadOutlined
- CloudOutlined
- CloudServerOutlined
- CloudSyncOutlined
- CloudUploadOutlined
- ClusterOutlined
- CodeOutlined
- CoffeeOutlined
- ColumnHeightOutlined
- ColumnWidthOutlined
- CommentOutlined
- CompassOutlined
- CompressOutlined
- ConsoleSqlOutlined
- ContactsOutlined
- ContainerOutlined
- ControlOutlined
- CopyOutlined
- CopyWritingOutlined
- CreditCardOutlined
- CrownOutlined
- CustomerServiceOutlined
- DashboardOutlined
- DatabaseOutlined
- DeleteColumnOutlined
- DeleteOutlined
- DeleteRowOutlined
- DeliveredProcedureOutlined
- DeploymentUnitOutlined
- DesktopOutlined
- DiffOutlined
- DingtalkOutlined
- DisconnectOutlined
- DislikeOutlined
- DollarCircleOutlined
- DollarOutlined
- DownloadOutlined
- DownCircleOutlined
- DownOutlined
- DragOutlined
- DribbbleOutlined
- DropboxOutlined
- EditOutlined
- EllipsisOutlined
- EnterOutlined
- EnvironmentOutlined
- EuroCircleOutlined
- EuroOutlined
- ExceptionOutlined
- ExclamationCircleOutlined
- ExclamationOutlined
- ExpandAltOutlined
- ExpandOutlined
- ExperimentOutlined
- ExportOutlined
- EyeInvisibleOutlined
- EyeOutlined
- FacebookOutlined
- FallOutlined
- FastBackwardOutlined
- FastForwardOutlined
- FastMailOutlined
- FileAddOutlined
- FileDoneOutlined
- FileExcelOutlined
- FileExclamationOutlined
- FileOutlined
- FileGifOutlined
- FileImageOutlined
- FileJpgOutlined
- FileMarkdownOutlined
- FilePdfOutlined
- FilePptOutlined
- FileProtectOutlined
- FileSearchOutlined
- FileSyncOutlined
- FileTextOutlined
- FileUnknownOutlined
- FileWordOutlined
- FileZipOutlined
- FilterOutlined
- FireOutlined
- FlagOutlined
- FolderAddOutlined
- FolderOutlined
- FolderOpenOutlined
- FolderViewOutlined
- FontSizeOutlined
- ForkOutlined
- FormOutlined
- FormatPainterOutlined
- ForwardOutlined
- FrownOutlined
- FullscreenExitOutlined
- FullscreenOutlined
- FunctionOutlined
- FundProjectionScreenOutlined
- FundViewOutlined
- FunnelPlotOutlined
- GatewayOutlined
- GifOutlined
- GiftOutlined
- GithubOutlined
- GitlabOutlined
- GlobalOutlined
- GoldOutlined
- GooglePlusOutlined
- GoogleOutlined
- GroupOutlined
- HddOutlined
- HeartOutlined
- HeatMapOutlined
- HighlightOutlined
- HistoryOutlined
- HomeOutlined
- HourglassOutlined
- Html5Outlined
- IdcardOutlined
- IeOutlined
- ImportOutlined
- InboxOutlined
- InfoCircleOutlined
- InfoOutlined
- InsertRowAboveOutlined
- InsertRowBelowOutlined
- InsertRowLeftOutlined
- InsertRowRightOutlined
- InstagramOutlined
- InsuranceOutlined
- InteractionOutlined
- IssuesCloseOutlined
- ItalicOutlined
- KeyOutlined
- LaptopOutlined
- LayoutOutlined
- LeftCircleOutlined
- LeftOutlined
- LeftSquareOutlined
- LikeOutlined
- LineOutlined
- LineHeightOutlined
- LinkOutlined
- LinkedinOutlined
- Loading3QuartersOutlined
- LoadingOutlined
- LockOutlined
- LoginOutlined
- LogoutOutlined
- MacCommandOutlined
- MailOutlined
- ManOutlined
- MedicineBoxOutlined
- MediumOutlined
- MehOutlined
- MenuFoldOutlined
- MenuOutlined
- MenuUnfoldOutlined
- MergeCellsOutlined
- MessageOutlined
- MicrophoneOutlined
- MinusCircleOutlined
- MinusOutlined
- MinusSquareOutlined
- MobileOutlined
- MoneyCollectOutlined
- MonitorOutlined
- MoreOutlined
- NodeCollapseOutlined
- NodeExpandOutlined
- NodeIndexOutlined
- NotificationOutlined
- NumberOutlined
- OneToOneOutlined
- OrderedListOutlined
- PaperClipOutlined
- PartitionOutlined
- PauseCircleOutlined
- PauseOutlined
- PayCircleOutlined
- PercentageOutlined
- PhoneOutlined
- PicCenterOutlined
- PicLeftOutlined
- PicRightOutlined
- PictureOutlined
- PieChartOutlined
- PlayCircleOutlined
- PlaySquareOutlined
- PlusCircleOutlined
- PlusOutlined
- PlusSquareOutlined
- PoundCircleOutlined
- PoundOutlined
- PoweroffOutlined
- PrinterOutlined
- ProfileOutlined
- ProjectOutlined
- PropertySafetyOutlined
- PullRequestOutlined
- PushpinOutlined
- QqOutlined
- QrcodeOutlined
- QuestionCircleOutlined
- QuestionOutlined
- RadarChartOutlined
- RadiusBottomleftOutlined
- RadiusBottomrightOutlined
- RadiusSettingOutlined
- RadiusUpleftOutlined
- RadiusUprightOutlined
- ReadOutlined
- ReconciliationOutlined
- RedEnvelopeOutlined
- RedditOutlined
- RedoOutlined
- ReloadOutlined
- RestOutlined
- RetweetOutlined
- RightCircleOutlined
- RightOutlined
- RightSquareOutlined
- RiseOutlined
- RobotOutlined
- RocketOutlined
- RollbackOutlined
- RotateLeftOutlined
- RotateRightOutlined
- SafetyCertificateOutlined
- SafetyOutlined
- SaveOutlined
- ScanOutlined
- ScheduleOutlined
- ScissorOutlined
- SearchOutlined
- SecurityScanOutlined
- SelectOutlined
- SendOutlined
- SettingOutlined
- ShakeOutlined
- ShareAltOutlined
- ShopOutlined
- ShoppingCartOutlined
- ShoppingOutlined
- SinaWeiboOutlined
- SkinOutlined
- SkypeOutlined
- SlackOutlined
- SlidersOutlined
- SmallDashOutlined
- SmileOutlined
- SnippetsOutlined
- SolutionOutlined
- SortDescendingOutlined
- SortAscendingOutlined
- SoundOutlined
- SplitCellsOutlined
- StarOutlined
- StepBackwardOutlined
- StepForwardOutlined
- StockOutlined
- StopOutlined
- StrikethroughOutlined
- SubnodeOutlined
- SwapLeftOutlined
- SwapRightOutlined
- SwapOutlined
- SwitcherOutlined
- SyncOutlined
- TableOutlined
- TabletOutlined
- TagOutlined
- TagsOutlined
- TaobaoCircleOutlined
- TaobaoOutlined
- TeamOutlined
- ThunderboltOutlined
- ToTopOutlined
- ToolOutlined
- TrademarkCircleOutlined
- TrademarkOutlined
- TransactionOutlined
- TranslationOutlined
- TrophyOutlined
- TwitterOutlined
- UnderlineOutlined
- UndoOutlined
- UngroupOutlined
- UnlockOutlined
- UnorderedListOutlined
- UpCircleOutlined
- UpOutlined
- UpSquareOutlined
- UploadOutlined
- UsbOutlined
- UserAddOutlined
- UserDeleteOutlined
- UserOutlined
- UserSwitchOutlined
- UsergroupAddOutlined
- UsergroupDeleteOutlined
- VerifiedOutlined
- VerticalAlignBottomOutlined
- VerticalAlignMiddleOutlined
- VerticalAlignTopOutlined
- VerticalLeftOutlined
- VerticalRightOutlined
- VideoCameraAddOutlined
- VideoCameraOutlined
- WalletOutlined
- WarningOutlined
- WechatOutlined
- WeiboCircleOutlined
- WeiboOutlined
- WhatsAppOutlined
- WifiOutlined
- WindowsOutlined
- WomanOutlined
- YahooOutlined
- YoutubeOutlined
- YuqueOutlined
- ZoomInOutlined
- ZoomOutOutlined
4. 示例代码
以下是一个使用@ant-design/icons-react图标库的完整例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- - ---- --------------------------
----- ------- - -- -- -
-----
-------------- --
------
--
------ ------- --------5. 总结
通过使用@ant-design/icons-react包，您可以使用Ant Design图标库，从而轻松地在React项目中使用图标，并且可以通过一些工具进行定制。这个包具有非常好的可扩展性，您可以非常简单地在项目中使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/162295