嗨，我是 `Martin`，也叫老王，今天推薦一款好用的開源圖示庫。 我們平常找圖示往往會去 [`iconfont`](https://www.iconfont.cn/)  但是今天，我們看了 `Martin` 的文章之後，就會有一個新的選擇——`CSS.GG`  ## Github [`https://github.com/astrit/css.gg`](https://github.com/astrit/css.gg) - `star 5751` - `fork 214` - `Watch 86` - 專案介紹 **`700 +` 純 `CSS`, `SVG & Figma UI Icons` 可用在 `SVG` 精靈圖, `styled-components`, `NPM & API`** ## 使用方法 通過 npm or yarn 安裝最新版本 ```shell npm i css.gg ``` ```shell yarn add css.gg ``` **使用該包** 該包，包含以下目錄和檔案: | Path                             | What it is | | :-- | :-- | | /css | individual \*.css icons | | /scss | individual \*.scss icons | | /svg | individual \*.svg icons | | /tsx | individual \*.tsx icons `styled-components` | | /all.css | all icons compressed in a single file | | /all.d.ts | `styled-components` | | /all.fig | local figma file same as [https://css.gg/fig](https://css.gg/fig) | | /all.js | list of exported `styled-components` | | /all.js.map | `styled-components` | | /all.json | all icons \*.css, \*.svg, \*.tsx including markup & public path | | /all.scss | all icons in a single SCSS file `npm i node-sass` needed | | /all.svg | SVG Sprite with all icons | | /all.xd | local adobe xd file same as [https://css.gg/xd](https://css.gg/xd) | | /all.xml | all icons \*.css, \*.svg, \*.tsx including markup & public path | ### HTML 匯入 #### 1. All icons ```html ``` #### 2. Single icon ```html ``` #### 3. Collection ```html ``` #### 4. Markup ```html ``` ##### 5. Example ```html ``` ### 其他方式 - `CSS @import` - `SVG` - `JSON - paths` - `XML - paths` - `React` - `Design Tools` - `Figma` [https://css.gg/fig](https://css.gg/fig) - `Adobe XD` [https://css.gg/xd](https://css.gg/xd) ## 關注我們 今天的分享就到這裡，點贊、收藏、留言，三連。 **記得關注我們喲，送你一份前端大禮包**。 ![](https://imgkr.cn-bj.ufileos.com/f819ad89-839d-409d-9a18-3ccd463814