Genericons Neue

This is a refreshed version of Genericons (https://github.com/Automattic/Genericons), which is more consistent in its visual style and weight. A bunch of icons have been removed, including all logos, and older dingbats that are better drawn using CSS today.
Automattic · Nov 15, 2016 · b19644b · b19644b
1 parent bd9b8dc
commit b19644b
Show file tree

Hide file tree

Showing 223 changed files with 4,148 additions and 2 deletions.
diff --git a/COPYING.md b/COPYING.md
@@ -0,0 +1,9 @@
+Genericons is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.
+
+The fonts are distributed WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+
+As a special exception, if you create a document which uses this font, and embed this font or unaltered portions of this font into the document, this font does not by itself cause the resulting document to be covered by the GNU General Public License. This exception does not however invalidate any other reasons why the document might be covered by the GNU General Public License. If you modify this font, you may extend this exception to your version of the font, but you are not obligated to do so. If you do not wish to do so, delete this exception statement from your version.
+
+This license does not convey any intellectual property rights to third party trademarks that may be included in the icon font; such marks remain subject to all rights and guidelines of use of their owner.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -0,0 +1,195 @@
+/*
+ * Export Genericons
+ */
+
+'use strict';
+
+var multiline = require('multiline');
+
+module.exports = function(grunt) {
+
+	// Project configuration.
+	grunt.initConfig({
+
+		// Minify SVGs from svg directory, output to svg-min
+		svgmin: {
+			dist: {
+				files: [{
+					attrs: 'fill',
+					expand: true,
+					cwd: 'svg',
+					src: ['*.svg'],
+					dest: 'svg-min/',
+					ext: '.svg'
+				}]
+			},
+			options: {
+				plugins: [
+					{ removeAttrs: { attrs: ['fill', 'id', 'style'] } },
+					{ removeViewBox: false },
+					{ removeEmptyAttrs: false }
+				]
+			}
+		},
+
+		// Create single SVG sprite for use outside of React environments, output to svg-sprite
+		svgstore: {
+			withCustomTemplate:{
+				options: {
+					prefix : '', // Unused by us, but svgstore demands this variable
+					svg: { // will add and overide the the default xmlns="http://www.w3.org/2000/svg" attribute to the resulting SVG
+						viewBox : '0 0 16 16',
+						xmlns: 'http://www.w3.org/2000/svg'
+					},
+
+					cleanup : ['style', 'fill', 'id'],
+
+					includedemo : multiline.stripIndent(function(){/*
+					<!DOCTYPE html>
+					<html>
+					<head>
+					<title>Genericons Neue</title>
+					<meta name="robots" content="noindex">
+					<link rel="stylesheet" type="text/css" href="genericons-neue-demo.css" />
+					<script src="genericons-neue-demo.js"></script>
+					</head>
+					<body>
+
+					<h1>Genericons Neue</h1>
+
+					{{{svg}}}
+
+					<div id="icons">
+					{{#each icons}}
+						<div>
+							<svg width="16" height="16" class="genericon {{name}}">
+							<use xlink:href="#{{name}}" />
+							</svg>
+							<p>{{title}}</p>
+						</div>
+					{{/each}}
+					</div>
+
+					</body>
+					</html>
+					*/})
+
+				},
+				files: {
+					'svg-sprite/genericons-neue.svg': ['svg/*.svg']
+				}
+			},
+		},
+
+		rename: {
+			moveThis: {
+					src: 'svg-sprite/genericons-neue-demo.html',
+					dest: 'svg-sprite/index.html'
+			},
+		},
+
+		// generate a web font
+		webfont: {
+			icons: {
+				src: 'svg/*.svg',
+				dest: 'icon-font'
+			},
+			options: {
+				'font': 'Genericons-Neue',
+				'types': 'eot,woff2,woff,ttf',
+				'order': 'eot,woff,ttf',
+				'embed': true,
+				'relativeFontPath': 'icon-font',
+				templateOptions: {
+					baseClass: 'genericons-neue',
+					classPrefix: 'genericons-neue-',
+					mixinPrefix: 'genericon-neue-'
+				},
+				codepointsFile: 'codepoints.json'
+			}
+		},
+
+		cssmin: {
+			target: {
+				files: [{
+					expand: true,
+					cwd: 'icon-font/',
+					src: ['*.css', '!*.min.css'],
+					dest: 'icon-font/',
+					ext: '.min.css'
+				}]
+			}
+		},
+	});
+
+	// Load the copier
+	grunt.loadNpmTasks('grunt-contrib-copy');
+
+	// Load the SVGstore
+	grunt.loadNpmTasks('grunt-svgstore');
+
+	// Load the renamer
+	grunt.loadNpmTasks('grunt-rename');
+
+	// Load svgmin
+	grunt.loadNpmTasks('grunt-svgmin');
+
+	// load the webfont creater
+	grunt.loadNpmTasks('grunt-webfont');
+
+	// minify css files
+	grunt.loadNpmTasks('grunt-contrib-cssmin');
+
+	// Update all files in svg-min to add a <g> group tag
+	grunt.registerTask( 'group', 'Add <g> tag to SVGs', function() {
+		var svgFiles = grunt.file.expand( { filter: 'isFile', cwd: 'svg-min/' }, [ '**/*.svg' ] );
+
+		// Add stuff
+		svgFiles.forEach( function( svgFile ) {
+
+			// Grab the relevant bits from the file contents
+			var fileContent = grunt.file.read( 'svg-min/' + svgFile );
+
+			// Add transparent rectangle to each file
+			fileContent = fileContent.slice( 0, fileContent.indexOf('viewBox="0 0 16 16">') + 20 ) +	// opening SVG tag
+						'<g>' +
+						fileContent.slice( fileContent.indexOf('viewBox="0 0 16 16">') + 20, -6 ) + 	// child elements of SVG
+						'</g>' +
+						fileContent.slice( -6 );	// closing SVG tag
+
+			// Save and overwrite the files in svg-min
+			grunt.file.write( 'svg-min/' + svgFile, fileContent );
+
+		} );
+
+	});
+
+	// Update all files in svg-min to add transparent square, this ensures copy/pasting to Sketch maintains a 16x16 size
+	grunt.registerTask( 'addsquare', 'Add transparent square to SVGs', function() {
+		var svgFiles = grunt.file.expand( { filter: 'isFile', cwd: 'svg-min/' }, [ '**/*.svg' ] );
+
+		// Add stuff
+		svgFiles.forEach( function( svgFile ) {
+
+			// Grab the relevant bits from the file contents
+			var fileContent = grunt.file.read( 'svg-min/' + svgFile );
+
+
+			// Add transparent rectangle to each file
+			fileContent = fileContent.slice( 0, fileContent.indexOf('viewBox="0 0 16 16">') + 20 ) +
+						'<rect x="0" fill="none" width="16" height="16"/>' +
+						fileContent.slice( fileContent.indexOf('viewBox="0 0 16 16">') + 20, -6 ) +
+						fileContent.slice( -6 );
+
+			// Save and overwrite the files in svg-min
+			grunt.file.write( 'svg-min/' + svgFile, fileContent );
+
+		} );
+
+	});
+
+	// Default task(s).
+
+	grunt.registerTask('default', ['svgmin', 'group', 'svgstore', 'rename', 'webfont', 'cssmin','addsquare']);
+
+};
diff --git a/LICENSE → LICENSE.md b/LICENSE → LICENSE.md
diff --git a/README.md b/README.md
@@ -1,2 +1,52 @@
-# genericons-neue
-Genericons are generic looking icons, suitable for a blog or simple website
+# Genericons Neue
+
+Genericons Neue are generic looking icons, suitable for a blog or simple website.
+
+Genericons Neue is a new version of <a href="https://github.com/Automattic/Genericons">Genericons</a>, with a refreshed look, but no social logos. That means if you use any of the logos from Genericons, *you can't use Genericons Neue as a drop-in replacement*. If you used only icons, you probably can, but be sure to test thoroughly. For a much better set of social logos, please please consider <a href="https://github.com/Automattic/social-logos">Social Logos</a>.
+
+## Usage
+
+The Genericons Neue icon set comes in three versions:
+
+- Minimized SVG files in the `svg-min` directory
+- An SVG sprite (not compatible with IE) in the `svg-sprite` directory
+- An icon font (<a href="https://code.google.com/p/chromium/issues/detail?id=426333">shows up blurry in Chrome</a>) in the `icon-font` directory
+
+
+## Icon Set Style Guidelines
+
+- 16pt base grid
+- mostly straight angles, with occasional rounded edges for style
+- flat, bidimensional look
+- 2pt lines generally
+- 1.5pt lines when necessary for clarity, be sure to have one edge on the pixelgrid
+- 2pt corner radius
+- no logos
+- mostly solid icons
+
+These are not rules, they are guidelines that can be broken with the proper reason.
+
+
+## Building your own Genericons
+
+Genericons Neue is built semi-automatically. SVG source files in the `svg` directory are processed and converted into minimized SVGs, a sprite, and an icon font using `grunt`. To build your own version of Genericons Neue, follow these instructions:
+
+```
+brew install ttfautohint fontforge --with-python
+npm install
+grunt
+```
+
+## Notes
+
+**Pixel grid**
+
+Genericons Neue has been designed for a 16x16px grid. That means it'll look sharp at font-size: 16px exactly. It'll also be crisp at multiples thereof, such as 32px or 64px. It'll look reasonably crisp at in-between font sizes such as 24px or 48px, but not quite as crisp as 16 or 32. Please don't set the font-size to 17px, though, that'll just look terrible blurry.
+
+**Antialiasing**
+
+If you keep intact the `-webkit-font-smoothing: antialiased;` and `-moz-osx-font-smoothing: grayscale;` CSS properties. That'll make the icons look their best possible, in Firefox and WebKit based browsers.
+
+**optimizeLegibility**
+
+Note: On Android browsers with version 4.2, 4.3, and probably later, Genericons Neue will simply not show up if you're using the CSS property "text-rendering" set to "optimizeLegibility.