又一款開源圖標庫 CSS.GG，值得一用

時間 2020-07-06

標籤一款開源圖標 css.gg css 值得欄目 CSS 简体版

原文原文鏈接

嗨，我是 Martin，也叫老王，今天推薦一款好用的開源圖標庫。css

咱們日常找圖標每每會去 iconfonthtml

可是今天，咱們看了 Martin 的文章以後，就會有一個新的選擇——CSS.GG前端

Github

https://github.com/astrit/css.ggnode

star 5751
fork 214
Watch 86
項目介紹

700 + 純 CSS, SVG & Figma UI Icons 可用在 SVG 精靈圖, styled-components, NPM & APIgit

使用方法

經過 npm or yarn 安裝最新版本github

npm i css.gg
複製代碼

yarn add css.gg
複製代碼

使用該包shell

該包，包含如下目錄和文件:npm

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 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 css.gg/xd
/all.xml	all icons .css, .svg, *.tsx including markup & public path

HTML 導入

1. All icons

<!-- css.gg -->
<link href='https://css.gg/css' rel='stylesheet'>

<!-- UNPKG -->
<link href='https://unpkg.com/css.gg/icons/all.css' rel='stylesheet'>

<!-- JSDelivr -->
<link href='https://cdn.jsdelivr.net/npm/css.gg/icons/all.css' rel='stylesheet'>
複製代碼

2. Single icon

<!-- css.gg -->
<link href='https://css.gg/ {ICONNAME} .css' rel='stylesheet'>

<!-- UNPKG -->
<link href='https://unpkg.com/css.gg/icons/css/ {ICONNAME} .css' rel='stylesheet'>

<!-- JSDelivr -->
<link href='https://cdn.jsdelivr.net/npm/css.gg/icons/css/ {ICONNAME} .css' rel='stylesheet'>
複製代碼

3. Collection

<!-- CSS Format -->
<link href='https://css.gg/css?= {ICONNAME} | {ICONNAME}' rel='stylesheet'>
複製代碼

4. Markup

<i class=" {ICONNAME} "></i>

<!-- reference icon using span -->
<span class=" {ICONNAME} "></span>

<!-- reference icon using div -->
<div class=" {ICONNAME} "></div>

<!-- reference icon using custom tag -->
<gg-icon class=" {ICONNAME} "></gg-icon>
複製代碼

5. Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- You can add this link or any other CDN alternatives as mentioned above -->
    <link href='https://css.gg/css' rel='stylesheet'>

</head>
<body>

    <!-- Using i tag -->
    <i class="gg- {ICONNAME} "></i>

    <!-- Using div tag -->
    <div class="gg- {ICONNAME} "></div>

    <!-- Using custom tag -->
    <gg-icon class="gg- {ICONNAME} "></gg-icon>

</body>
</html>
複製代碼