免费套图:一套非常不错的 SVG 图标

Glyph 是 SmartIcons 出品的一套 SVG 图标,看起来非常不错,将近 800 个图标。他们在官网宣称:

Icon font is so yesterday. Say hello to “Glyph”, a semantic and versatile SVG icon set designed for customization.

Icon font 已是昨日黄花。拥抱 Glyph 吧,一套语义化通用的 SVG 图标集,为定制化而生。640

下载链接:https://github.com/frexy/glyph-iconset/archive/master.zip

有多种使用方法

IMG 标签

<img src=”svg/si-glyph-bicycle-man.svg”>

Inline SVG

或者把 SVG 内容复制粘贴到 HTML 文件中

SVG Sprite

SVG 图标最优美的使用方式是 SVG sprite,示例 sample.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>

这种方法利用 <use> 标签,从 HTML 中的 SVG spirte 文件取 SVG 内容。

Style with CSS

通过 inline SVG 和 sprite 方法,也可以轻松用 CSS 改变图标风格。如下:

改变整套图标的风格

.si-glyph * {

fill: red;

}

改变指定图标的风格

.si-glyph-bubble-message-hi {

fill: blue;

}

这套图标遵循 CC BY-SA 4.0 协议。

未经允许不得转载:蒋丽君的小站 » 免费套图:一套非常不错的 SVG 图标

赞 (4)

1 评论

1+3=