程序员设计师——Github这一组700+纯CSS、SVG开源图标

介绍

css.gg项目是#Github#的一个开源图标项目,CSS、SVG和Figma用户界面#图标#,可以以css、svg、tsx、fig、xd、json、xml的形式使用,而且图标质量相当之高,值得推荐使用!


程序员设计师——Github这一组700+纯CSS、SVG开源图标

Github

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

特点

css.gg的特点就是轻量、可靠、灵活、优雅

程序员设计师——Github这一组700+纯CSS、SVG开源图标

图标分类

警报、箭头、品牌、按钮、代码、内容、设计、设备、文件夹、接口、数学、多媒体、音乐、形状、购物、标志、时间,目前图标总数704个

程序员设计师——Github这一组700+纯CSS、SVG开源图标
程序员设计师——Github这一组700+纯CSS、SVG开源图标

下面一起来看看

程序员设计师——Github这一组700+纯CSS、SVG开源图标
程序员设计师——Github这一组700+纯CSS、SVG开源图标
程序员设计师——Github这一组700+纯CSS、SVG开源图标
程序员设计师——Github这一组700+纯CSS、SVG开源图标
程序员设计师——Github这一组700+纯CSS、SVG开源图标
程序员设计师——Github这一组700+纯CSS、SVG开源图标
程序员设计师——Github这一组700+纯CSS、SVG开源图标
程序员设计师——Github这一组700+纯CSS、SVG开源图标
程序员设计师——Github这一组700+纯CSS、SVG开源图标
程序员设计师——Github这一组700+纯CSS、SVG开源图标
程序员设计师——Github这一组700+纯CSS、SVG开源图标
程序员设计师——Github这一组700+纯CSS、SVG开源图标
程序员设计师——Github这一组700+纯CSS、SVG开源图标
程序员设计师——Github这一组700+纯CSS、SVG开源图标
程序员设计师——Github这一组700+纯CSS、SVG开源图标
程序员设计师——Github这一组700+纯CSS、SVG开源图标
程序员设计师——Github这一组700+纯CSS、SVG开源图标

安装使用

以下是在代码中的用法

npm i css.gg
yarn add css.gg
  • 所有图标
<link href='all.css' rel='stylesheet'>
  • 单一图标
<!-- css.gg --><link href=' {ICONNAME} .css' rel='stylesheet'>
  • 多个图标
<link href='css?= {ICONNAME} | {ICONNAME}' rel='stylesheet'>
<i class=" {ICONNAME} "></i><!-- 使用span --><span class=" {ICONNAME} "></span><!-- 使用div --><div class=" {ICONNAME} "></div><!-- 使用自定义标签 --><gg-icon class=" {ICONNAME} "></gg-icon>
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>实例</title>      <link href='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>

除此之外还可以模块化的用法

@import url('.../css');
  • React中的用法
import React from 'react'import { ICONNAME } from 'css.gg'export default function() {  return (    <div>      <ICONNAME />    </div>  )}
  • SVG的用法
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>实例</title></head><body><!-- 首先要把svg拷贝到项目文件夹 --><svg><use xlink:href="path/to/all.svg# {ICONNAME} "/></svg></body></html>

总结

css.gg是一个非常不错的图标库,而且开放源代码,内置700+精美图标,十几大类型,不管是设计师还是#程序员#,用起来都可以得心应手,enjoy it!

版权声明:飞鱼 发表于 2020-07-19 11:53:44。
转载请注明:程序员设计师——Github这一组700+纯CSS、SVG开源图标 | HelloWorld.La

暂无评论

暂无评论...