chutichhuy / glyph-iconset Goto Github PK

A minimal SVG icon set for modern web

License: Other

JavaScript 2.68% HTML 96.91% Handlebars 0.41%

glyph-iconset's Introduction

Glyph, a versatile SVG icon set

http://glyph.smarticons.co

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

<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.

<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 provides a great way to embed icons in your design by using a custom tag. Please check sprite/sample-iwc.html for code snippets.

<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

.si-glyph * {
    fill: red;
}

Style some specified icons

.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 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)

glyph-iconset's People

Contributors

Stargazers

Watchers

glyph-iconset's Issues

Grid at http://glyph.smarticons.co/ doesn't render correctly in Firefox Nightly

STR:

Load http://glyph.smarticons.co/ in Firefox Nightly (version 41 or newer)
Look at the glyph grid.

ACTUAL RESULTS: The glyphs are indecipherable squiggles; not how they're supposed to look.

I originally filed this in Firefox's bug tracker. As noted there, it looks like this broke when Firefox switched to match Chrome on a particular unspecified point.

The glyph.smarticons.co site seems to serve Chrome different content than it serves to Firefox, based on the User Agent string -- and Firefox Nightly can correctly render the Chrome content (e.g. I locally make Firefox use Chrome's user agent string.)

Publish to NPM

Hello! Is there any particular reason why this (really awesome!) package is not available via npm install glyph-iconset?

Thanks!

Icon fonts are so yesterday?

Seriously, you need me to create a spritesheet or drop individual *.svg files into my project instead of just one line of code to import the css referencing and including the font? I don't think so.

Any chance these great icons will be available as icon font?

Hovering on icon gives icon number as title

<a href="/new-post" title="Add new post">
  <svg-icon><src href="/glyph-iconset/sprite/sprite.svg#si-glyph-button-plus" /></svg-icon>
</a>

When I hover over the icon, "971" appears as the title, not "Add new post". In Linux Chrome and Firefox.

Why is this so? Can this be fixed?

Url does not work

https://glyph.smarticons.co/

CSS fill or SVG fill attribute is not applied

Color is not being set when try to apply neither css or attribute.

<svg xmlns="http://www.w3.org/2000/svg">
    <use style="fill: red !important;" fill="red" xlink:href="sprite.svg#si-glyph-bubble-message-hi" />
</svg>

I think it is caused because it has been set in the SVG file, in attribute fill in tag g and path. Children attributes are not overriden by fill in parent svg and also it cannot be modified cause en use tag use it is loaded as shadow dom closed that cant be modified with javascript.


<symbol id="si-glyph-bubble-message-hi" viewBox="0 0 17 16">
    <!-- Generator: Sketch 3.0.3 (7891) - http://www.bohemiancoding.com/sketch -->
    <title>1036</title>
    
    <defs/>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="{..}" fill="#434343" class="si-glyph-fill"/>
    </g>

</symbol>

Is there another way to solve this? rather than modify the sprite.svg