在前端开发中，icon 是一个重要的 UI 元素，它可以增加页面的可读性，改善用户体验。@primer/octicons-react 是一个流行的 npm 包，它提供了一系列漂亮的 icon，可以方便地在 React 项目中使用。在本文中，我们将探讨如何使用 @primer/octicons-react 包。
安装
可以使用 npm 或 yarn 安装 @primer/octicons-react：
npm install @primer/octicons-react
yarn add @primer/octicons-react
使用
导入
在使用 @primer/octicons-react 之前，需要将它导入到你的文件中。你可以使用 es6 import 语法导入它：
import Octicon, { AlertIcon } from '@primer/octicons-react';以上代码导入了 @primer/octicons-react 包中的 Octicon 和 AlertIcon 组件。
使用组件
使用 @primer/octicons-react 组件非常简单，只需要在代码中渲染它即可：
<Octicon icon={AlertIcon} />该代码将渲染一个 Alert icon。
你也可以在组件标签中添加附加的 props，比如 size、verticalAlign、className 等。
<Octicon icon={AlertIcon} size="medium" verticalAlign="middle" className="text-warning" />所有 icon
@primer/octicons-react 提供了丰富的 icon，你可以在官方文档中找到完整的列表。以下是一些常用的 icon：
- AlertIcon
- CheckIcon
- ChevronDownIcon
- ChevronLeftIcon
- ChevronRightIcon
- ChevronUpIcon
- CircleSlashIcon
- ClippyIcon
- ClockIcon
- CodeIcon
- CommentIcon
- DiffAddedIcon
- DiffIgnoredIcon
- DiffModifiedIcon
- DiffRemovedIcon
- DiffRenamedIcon
- EllipsisIcon
- EyeIcon
- FileIcon
- FlameIcon
- FoldIcon
- GearIcon
- GistIcon
- GitBranchIcon
- GitCommitIcon
- GitCompareIcon
- GitMergeIcon
- GitPullRequestIcon
- GlobeIcon
- GrabberIcon
- HeartIcon
- HistoryIcon
- HomeIcon
- HorizontalRuleIcon
- HubotIcon
- InfoIcon
- IssueClosedIcon
- IssueOpenedIcon
- IssueReopenedIcon
- ItalicIcon
- JumpDownIcon
- JumpLeftIcon
- JumpRightIcon
- JumpUpIcon
- KeyIcon
- LawIcon
- LightBulbIcon
- LinkExternalIcon
- LinkIcon
- ListOrderedIcon
- ListUnorderedIcon
- LocationIcon
- LockIcon
- LogoGithubIcon
- MailIcon
- MarkGithubIcon
- MarkdownIcon
- MegaphoneIcon
- MentionIcon
- MilestoneIcon
- MirrorIcon
- MudslideIcon
- MuteIcon
- NoEntryIcon
- OctofaceIcon
- OrganizationIcon
- PackageIcon
- PaintcanIcon
- PencilIcon
- PersonIcon
- PinIcon
- PlugIcon
- PlusIcon
- PlusSmallIcon
- PrimitiveDotIcon
- PrimitiveSquareIcon
- ProjectIcon
- PulseIcon
- QuestionIcon
- QuoteIcon
- RadioTowerIcon
- RemoveCloseIcon
- RepoCloneIcon
- RepoForcePushIcon
- RepoForkedIcon
- RepoIcon
- RepoPullIcon
- RepoPushIcon
- RepoTemplateIcon
- ReportIcon
- RssIcon
- RubyIcon
- ScreenFullIcon
- ScreenNormalIcon
- SearchIcon
- ServerIcon
- SettingsIcon
- ShieldCheckIcon
- ShieldLockIcon
- ShieldXIcon
- SignInIcon
- SignOutIcon
- SmileyIcon
- SquareFillIcon
- SquareIcon
- StarFillIcon
- StarIcon
- StopIcon
- StopwatchIcon
- StrikethroughIcon
- SunIcon
- SyncIcon
- TabIcon
- TagIcon
- TasklistIcon
- TelescopeIcon
- TerminalIcon
- TextSizeIcon
- ThreeBarsIcon
- ThumbsdownIcon
- ThumbsupIcon
- ToolsIcon
- TrashcanIcon
- TriangleDownIcon
- TriangleLeftIcon
- TriangleRightIcon
- TriangleUpIcon
- UnfoldIcon
- UnlockIcon
- UnmuteIcon
- UnverifiedIcon
- VerifiedIcon
- VersionsIcon
- WatchIcon
- XIcon
- ZapIcon
示例代码
下面是一个使用 @primer/octicons-react 渲染 icon 的完整示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- - --------- - ---- -------------------------
-------- ------------- -
------ -
-----
------ -------------
--------- ---------
---
-------- ---------------- ------------ ---------------------- --
---------
----
------ ---------
----
----
-------- ---------------- -- ----
-----
----
-------- --------------- -- ----
-----
----
-------- ---------------- -- ---
-----
-----
------
--
-
------ ------- ------------在上面的示例中，我们导入了 AlertIcon、CheckIcon、MailIcon 和 ClockIcon 组件，并渲染它们。注意，在使用组件前，需要将它们导入到文件中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaaceb5cbfe1ea06105a1