前言
在前端开发中，我们经常需要使用一些图标来丰富页面内容。GitHub 的无数图标设计得非常优秀，对于前端开发来说也是个很好的资源。但是，如果手动去下载、引入这些图标，随着图标数量的增多，维护成本将逐渐变高。因此，GitHub 推出了 @primer/octicons-v2，也就是本篇文章要介绍的内容。
什么是 @primer/octicons-v2？
@primer/octicons-v2 是 GitHub 官方的一个图标库，它是一组矢量图标，图标数量很多，包括各种常用场景和动态的图标，如常见的文件类型图标、Badge、各种状态和带有文字的图标等。且这些图标全部以 SVG 格式存储，使得它们可以保持高清晰度并且缩放不失真。
如何使用 @primer/octicons-v2？
@primer/octicons-v2 包含两个部分：Octicons（图标库本身）和 Octicons React（React 框架下的图标库）。在本篇文章中，我们侧重于介绍 Octicons。
首先，你需要在项目目录下使用 npm 安装 @primer/octicons-v2：
npm install @primer/octicons-v2 --save
然后，你可以使用如下的语句引入 @primer/octicons-v2，在本篇文章中，我们将引入所有的图标：
import * as Octicons from "@primer/octicons-v2";
之后，你就可以在项目代码中直接使用图标了。例如，我们可以使用如下语句在页面上显示一个 issue 的默认图标：
<span>${Octicons.IssueOpened.toSVG()}</span>除此之外，@primer/octicons-v2 还支持 SVG 属性的传递，例如通过 style 改变颜色：
<span>${Octicons.IssueOpened.toSVG({style: "color:#f00;"})}</span>可用的图标
@primer/octicons-v2 的图标数量非常多，全部都可以在官网上查看。其中最为常用的图标可能就是如下这些：
- Alert
- Archive
- ArrowDown
- ArrowLeft
- ArrowRight
- ArrowUp
- Book
- Bookmark
- Briefcase
- Broadcast
- Browser
- Bug
- Calendar
- Check
- Checklist
- ChevronDown
- ChevronLeft
- ChevronRight
- ChevronUp
- Circle
- Code
- Comment
- CommentDiscussion
- CreditCard
- Dash
- Dashboard
- Database
- Dependabot
- DesktopDownload
- DeviceCamera
- DeviceDesktop
- DeviceMobile
- Diff
- DiffAdded
- DiffIgnored
- DiffModified
- DiffRemoved
- DiffRenamed
- Ellipsis
- Eye
- File
- FileBinary
- FileCode
- FileDiff
- FileDirectory
- FileMedia
- FilePdf
- FileSubmodule
- FileSymlinkFile
- FileSymlinkSubmodule
- FileZip
- Filter
- Fold
- Gear
- Gift
- GitBranch
- GitCommit
- GitCompare
- GitForkPrivate
- GitMerge
- GitPullRequest
- Globe
- Graph
- Heart
- History
- Home
- HorizontalRule
- Hourglass
- Hubot
- Inbox
- Infinity
- Info
- IssueClosed
- IssueOpened
- IssueReopened
- Italic
- JumpDown
- JumpLeft
- JumpRight
- JumpUp
- Key
- Law
- LightBulb
- Link
- LinkExternal
- ListOrdered
- ListUnordered
- Location
- Lock
- LogoGist
- LogoGithub
- MarkGithub
- Markdown
- Megaphone
- Mention
- Milestone
- Mirror
- Moon
- MortarBoard
- Mute
- NoEntry
- NorthStar
- Note
- Octoface
- Organization
- Package
- PackageDependencies
- PackageDependents
- Paintcan
- Pencil
- Person
- Pin
- Play
- Plug
- Plus
- PlusCircle
- Project
- Pulse
- Question
- Quote
- RadioTower
- Reply
- Repo
- RepoClone
- RepoForcePush
- RepoForked
- RepoPull
- RepoPush
- RepoTemplate
- Report
- Rocket
- Rss
- Ruby
- ScreenFull
- ScreenNormal
- Search
- Server
- Settings
- Shield
- SignIn
- SignOut
- Skip
- Smiley
- Square
- SquareFill
- Star
- Stop
- Stopwatch
- Sun
- Support
- Sync
- Tab
- Tag
- Tasklist
- Telescope
- Terminal
- TextSize
- ThreeBars
- Thumbsdown
- Thumbsup
- Tools
- Trashcan
- TriangleDown
- TriangleLeft
- TriangleRight
- TriangleUp
- Typing
- Unfold
- Unlock
- Unmute
- Unverified
- Upload
- Verified
- Versions
- Workflow
- X
- XCircle
- Zap
结语
@primer/octicons-v2 是一个非常优秀的图标库，它包含了各种常用的图标，使用方便，非常适合在前端开发中使用。同时，@primer/octicons-v2 的安装、引入和使用也非常简单，难度不大。如果你需要在项目中使用图标，强烈推荐使用 @primer/octicons-v2！
示例代码：
-- -------------------- ---- -------
------ - -- -------- ---- ----------------------
----- --- - -- -- -
------ -
-----
-------------------------------------------
----------------------------------- -----------------------
------
--
--
------ ------- ----来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5ef187a48c4ce90ee4ca3b06