Skip to content
This repository was archived by the owner on Mar 13, 2018. It is now read-only.

Commit 70c805d

Browse files
dfreedmdfreedm
committed
Add svg -> iconset generator
Use public MD icons github repo
1 parent f8c0ef4 commit 70c805d

File tree

5 files changed

+286
-0
lines changed

5 files changed

+286
-0
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
util/node_modules
2+
material-design-icons

‎update-icons.sh

+138
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
#!/bin/bash
2+
#
3+
# @license
4+
# Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
5+
# This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6+
# The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7+
# The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8+
# Code distributed by Google as part of the polymer project is also
9+
# subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10+
#
11+
set -e
12+
13+
ICONSRC="material-design-icons/"
14+
ORIGIN="git://github.com/google/material-design-icons.git"
15+
16+
# bootstrap a sparse SVG only checkout
17+
bootstrap() {
18+
mkdir -p ${ICONSRC}
19+
pushd ${ICONSRC}
20+
git init
21+
git config core.sparsecheckout true
22+
echo "*/svg/*_24px.svg" >> .git/info/sparse-checkout
23+
git remote add -f origin ${ORIGIN}
24+
popd
25+
}
26+
27+
header() {
28+
cat > $1 <<ENDL
29+
<!--
30+
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
31+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
32+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
33+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
34+
Code distributed by Google as part of the polymer project is also
35+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
36+
-->
37+
38+
<link rel="import" href="../core-icon/core-icon.html">
39+
<link rel="import" href="../core-iconset-svg/core-iconset-svg.html">
40+
<core-iconset-svg id="$2" iconSize="24">
41+
<svg><defs>
42+
ENDL
43+
}
44+
45+
footer(){
46+
cat >> $1 <<ENDL
47+
</defs></svg>
48+
</core-iconset-svg>
49+
ENDL
50+
}
51+
52+
contains() {
53+
local e
54+
for e in "${@:2}"; do [[ "$e" == "$1" ]] && return 0; done
55+
return 1;
56+
}
57+
58+
build() {
59+
# dirname of path to current script
60+
local runfrom="${0%[/\\]*}"
61+
local folder="$1"
62+
63+
# put these sets into one big "icons" set
64+
local default=(action alert content file navigation toggle)
65+
66+
local name="icons"
67+
local file="../core-icons.html"
68+
69+
# special docs header for core-icons.html
70+
cat > $file <<'ENDL'
71+
<!--
72+
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
73+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
74+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
75+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
76+
Code distributed by Google as part of the polymer project is also
77+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
78+
-->
79+
<!--
80+
81+
`core-icons` is a utitliy import that includes the definition for the `core-icon` element, `core-iconset-svg` element, as well as an import for the default icon set.
82+
83+
The `core-icons` directory also includes imports for additional icon sets that can be loaded into your project.
84+
85+
Example loading icon set:
86+
87+
<link rel="import" href="../core-icons/maps-icons.html">
88+
89+
To use an icon from one of these sets, first prefix your `core-icon` with the icon set name, followed by a colon, ":", and then the icon id.
90+
91+
Example using the directions-bus icon from the maps icon set:
92+
93+
<core-icon icon="maps:directions-bus"></core-icon>
94+
95+
96+
See [core-icon](#core-icon) for more information about working with icons.
97+
98+
See [core-iconset](#core-iconset) and [core-iconset-svg](#core-iconset-svg) for more information about how to create a custom iconset.
99+
100+
@group Polymer Core Elements
101+
@element core-icons
102+
@homepage polymer.github.io
103+
-->
104+
<link rel="import" href="../core-icon/core-icon.html">
105+
<link rel="import" href="../core-iconset-svg/core-iconset-svg.html">
106+
<core-iconset-svg id="icons" iconSize="24">
107+
<svg><defs>
108+
ENDL
109+
110+
# find all the default icons, sort by basename (in perl), run concat
111+
find "${default[@]/#/$folder}" -name "*24px.svg" | xargs $runfrom/concat-svg.js | sort >> $file
112+
113+
footer $file
114+
115+
local dir
116+
for dir in $folder/*/; do
117+
if contains "`basename $dir`" "${default[@]}"; then
118+
continue
119+
fi
120+
echo $dir
121+
name=`basename $dir`
122+
file="../$name-icons.html"
123+
header $file $name
124+
find $dir -name "*24px.svg" | xargs $runfrom/concat-svg.js | sort >> $file
125+
footer $file
126+
done
127+
}
128+
129+
[ -d ${ICONSRC} ] || bootstrap
130+
131+
pushd ${ICONSRC}
132+
git pull origin master
133+
popd
134+
135+
pushd util
136+
npm install
137+
build ../${ICONSRC}
138+
popd

‎util/compile-icon-sets.sh

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
#!/bin/bash
2+
#
3+
# @license
4+
# Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
5+
# This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6+
# The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7+
# The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8+
# Code distributed by Google as part of the polymer project is also
9+
# subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10+
#
11+
12+
# dirname of path to current script
13+
runfrom="${0%[/\\]*}"
14+
FOLDER="$1"
15+
16+
# put these sets into one big "icons" set
17+
DEFAULT=(action alert content file navigation toggle)
18+
19+
# there are no icons here
20+
BLACKLIST=(moticons common_cfg proprietary)
21+
22+
header() {
23+
cat > $FILE <<ENDL
24+
<!--
25+
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
26+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
27+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
28+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
29+
Code distributed by Google as part of the polymer project is also
30+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
31+
-->
32+
33+
<link rel="import" href="../core-icon/core-icon.html">
34+
<link rel="import" href="../core-iconset-svg/core-iconset-svg.html">
35+
<core-iconset-svg id="$NAME" iconSize="24">
36+
<svg><defs>
37+
ENDL
38+
}
39+
40+
footer(){
41+
cat >> $FILE <<ENDL
42+
</defs></svg>
43+
</core-iconset-svg>
44+
ENDL
45+
}
46+
47+
contains() {
48+
local e
49+
for e in "${@:2}"; do [[ "$e" == "$1" ]] && return 0; done
50+
return 1;
51+
}
52+
53+
NAME="icons"
54+
FILE="core-icons.html"
55+
header
56+
# find all the default icons, sort by basename (in perl), run concat
57+
find "${DEFAULT[@]/#/$FOLDER}" -name "*24px.svg" | perl -le 'print sort{($p=$a)=~s|.*/||; ($q=$b)=~s|.*/||; lc($p) cmp lc($q)} <>' | xargs $runfrom/concat-svg.js >> $FILE
58+
footer
59+
60+
for dir in $FOLDER/*/; do
61+
if contains "`basename $dir`" "${DEFAULT[@]}"; then
62+
continue
63+
fi
64+
if contains "`basename $dir`" "${BLACKLIST[@]}"; then
65+
continue
66+
fi
67+
echo $dir
68+
NAME=`basename $dir`
69+
FILE="$NAME-icons.html"
70+
header
71+
find $dir -name "*24px.svg" | sort | xargs $runfrom/concat-svg.js >> $FILE
72+
footer
73+
done

‎util/concat-svg.js

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
#!/usr/bin/env node
2+
/*
3+
* @license
4+
* Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
5+
* This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6+
* The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7+
* The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8+
* Code distributed by Google as part of the polymer project is also
9+
* subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10+
*/
11+
12+
var fs = require('fs');
13+
var cheerio = require('cheerio');
14+
var path = require('path');
15+
16+
var cheerioOptions = {xmlMode: true};
17+
var files = process.argv.slice(2);
18+
19+
function read(file) {
20+
var content = fs.readFileSync(file, 'utf8');
21+
return cheerio.load(content, cheerioOptions);
22+
}
23+
24+
function transmogrify($, name) {
25+
var node = $('svg');
26+
// remove spacer rectangles
27+
node.find('[fill=none]').remove();
28+
// remove fill colors
29+
node.find('[fill]').each(function() {
30+
var e = $(this);
31+
var color = e.attr('fill');
32+
// some "white" nodes are extraneous
33+
if (color === '#FFFFFF') {
34+
e.remove();
35+
} else {
36+
e.removeAttr('fill');
37+
}
38+
});
39+
// remove adobe "save for web" elements
40+
node.find('sfw, metadata').remove();
41+
// remove empty groups
42+
var innerHTML = $.xml(node.find('*').filter(':not(g)'));
43+
// remove extraneous whitespace
44+
innerHTML = innerHTML.replace(/\t|\r|\n/g, '');
45+
// add parent group with icon name as id
46+
var output = '<g id="' + name + '">' + innerHTML + '</g>';
47+
// print icon svg
48+
console.log(output);
49+
}
50+
51+
function path2IconName(file) {
52+
parts = path.basename(file).split('_');
53+
// remove ic_
54+
parts.shift();
55+
// remove _24px.svg
56+
parts.pop();
57+
return parts.join('-');
58+
}
59+
60+
files.forEach(function(file) {
61+
var name = path2IconName(file);
62+
var $ = read(file);
63+
transmogrify($, name);
64+
});

‎util/package.json

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"name": "concat-svg",
3+
"version": "0.0.0",
4+
"description": "",
5+
"main": "concat-svg.js",
6+
"dependencies": {
7+
"cheerio": "^0.15.0"
8+
}
9+
}

0 commit comments

Comments
 (0)