# Glyph, a versatile SVG icon set
http://glyph.smarticons.co
![Preview](https://raw.githubusercontent.com/frexy/glyph-iconset/master/cover.png)
Glyph is a collection of ~800 beautiful pixel-perfect SVG icons, designed for the modern web. Glyph is 16x16, but because it's SVG, it can be any size you want.
## Updates
### Version 1.1
* Fixed some typos.
* Sprite generator.
## Usage
There are many ways to put an SVG icon into your web page.
### IMG tag
```html
<img src="svg/si-glyph-bicycle-man.svg">
```
### Inline SVG
Or you can copy the SVG content and paste it into your HTML.
### SVG Sprite
An elegant way to use SVG icons is SVG sprite, demonstrated in ```sample.html```.
```html
<svg xmlns="http://www.w3.org/2000/svg" class="si-glyph-bubble-message-hi">
<use xlink:href="sprite.svg#si-glyph-bubble-message-hi" />
</svg>
```
This method makes use of the ```<use>``` tag to link a part of SVG content from a SVG sprite file into your HTML.
### Use as a web component
The [icon web component](https://github.com/frexy/svg-icon-webcomponent) provides a great way to embed icons in your design by using a custom tag. Please check ```sprite/sample-iwc.html``` for code snippets.
```html
<svg-icon>
<src href="sprite.svg#si-glyph-bubble-message-hi"/>
</svg-icon>
```
## Style with CSS
Using inline SVG and web component methods, you can style your icon with CSS easily. Glyph is carefully made so that you can change all or some icons color with just these simple CSS snippet below.
Style the whole set
```css
.si-glyph * {
fill: red;
}
```
Style some specified icons
```css
.si-glyph-bubble-message-hi {
fill: blue;
}
```
## Custom sprite generator
From version 1.1, Glyph comes with a custom sprite generator script. You need [Node.js](http://nodejs.org) in order to use this script.
With your favorite terminal, change to the glyph directory, then:
```
node generator/generate.js
```
A few options:
* ```-f <csv-file>``` path to a one-column CSV file specified what icon you want to include in the sprite.
* ```-l <list-of-icons>``` a list of icons separated by commas. For example: bubble-message-hi,camera,car,alarm-clock
* ```-o <path-to-sprite>``` path lead to the output sprite file.
For example:
```
node generator/generate.js -l camera,car,alarm-clock -o some-icons.sprite
```
## Todo
* New icons.
## License
Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
flask bootstrap页面json格式化 (869个子文件)
bootstrap.css 188KB
bootstrap.rtl.css 188KB
bootstrap.rtl.min.css 150KB
bootstrap.min.css 150KB
bootstrap-grid.rtl.css 69KB
bootstrap-grid.css 69KB
bootstrap-utilities.css 65KB
bootstrap-utilities.rtl.css 65KB
bootstrap-grid.rtl.min.css 50KB
bootstrap-grid.min.css 50KB
bootstrap-utilities.min.css 48KB
bootstrap-utilities.rtl.min.css 48KB
bootstrap-reboot.css 6KB
bootstrap-reboot.rtl.css 6KB
bootstrap-reboot.rtl.min.css 5KB
bootstrap-reboot.min.css 5KB
list.csv 9KB
.gitignore 526B
.gitignore 50B
sample.handlebars 1KB
sample-iwc.handlebars 1KB
sample.html 371KB
sample-iwc.html 254KB
student.html 4KB
pythonProject29.iml 291B
bootstrap.bundle.js 205KB
bootstrap.js 148KB
bootstrap.esm.js 139KB
bootstrap.bundle.min.js 79KB
bootstrap.esm.min.js 75KB
bootstrap.min.js 61KB
iconwc.js 13KB
generate.js 3KB
sample.handlebars.js 3KB
sample-iwc.handlebars.js 2KB
Gruntfile.js 515B
generate-list.js 458B
package.json 770B
LICENSE 103B
bootstrap.rtl.min.css.map 608KB
bootstrap.css.map 489KB
bootstrap.rtl.css.map 488KB
bootstrap.min.css.map 412KB
bootstrap.bundle.js.map 401KB
bootstrap.bundle.min.js.map 311KB
bootstrap.js.map 272KB
bootstrap.esm.js.map 271KB
bootstrap.esm.min.js.map 213KB
bootstrap.min.js.map 207KB
bootstrap-grid.rtl.css.map 181KB
bootstrap-grid.css.map 181KB
bootstrap-grid.rtl.min.css.map 113KB
bootstrap-grid.min.css.map 113KB
bootstrap-utilities.css.map 108KB
bootstrap-utilities.rtl.css.map 108KB
bootstrap-reboot.rtl.css.map 92KB
bootstrap-reboot.css.map 92KB
bootstrap-reboot.rtl.min.css.map 40KB
bootstrap-reboot.min.css.map 34KB
bootstrap-utilities.min.css.map 28KB
bootstrap-utilities.rtl.min.css.map 28KB
README.md 2KB
cover.png 50KB
app.py 1KB
sprite.svg 908KB
si-glyph-cruise.svg 4KB
si-glyph-ladder-pool.svg 4KB
si-glyph-phone-number.svg 4KB
si-glyph-trolley-arrow-up.svg 3KB
si-glyph-trolley-arrow-down.svg 3KB
si-glyph-link-2.svg 3KB
si-glyph-network.svg 3KB
si-glyph-helm-wheel.svg 3KB
si-glyph-reel-audio.svg 3KB
si-glyph-dial-number.svg 3KB
si-glyph-pizza.svg 3KB
si-glyph-cloud-rain-heavy-rain.svg 3KB
si-glyph-building.svg 3KB
si-glyph-traffic-light.svg 3KB
si-glyph-christmas-mistletoe.svg 3KB
si-glyph-christmass-egg.svg 3KB
si-glyph-scissor-line-cut.svg 2KB
si-glyph-handcuff.svg 2KB
si-glyph-load.svg 2KB
si-glyph-trolley-plus.svg 2KB
si-glyph-airplane-2.svg 2KB
si-glyph-tennis-racket-ball.svg 2KB
si-glyph-birthday-cake.svg 2KB
si-glyph-trolley-remove.svg 2KB
si-glyph-back-pack.svg 2KB
si-glyph-tank.svg 2KB
si-glyph-trolley-error.svg 2KB
si-glyph-sms.svg 2KB
si-glyph-connect-2.svg 2KB
si-glyph-sos.svg 2KB
si-glyph-mark-snorker.svg 2KB
si-glyph-hammer-and-wrench.svg 2KB
si-glyph-cpu.svg 2KB
si-glyph-circle-drashed.svg 2KB
si-glyph-helicopter.svg 2KB
共 869 条
- 1
- 2
- 3
- 4
- 5
- 6
- 9
资源评论
U盘失踪了
- 粉丝: 1w+
- 资源: 18
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功