Skip to content
This repository was archived by the owner on May 29, 2019. It is now read-only.

Commit 286ba98

Browse files
ebidelebidel
committed
Merge pull request #3 from devnook/master
Adding icon guide
2 parents f43597f + d6cb6eb commit 286ba98

File tree

4 files changed

+238
-15
lines changed

4 files changed

+238
-15
lines changed

‎app.yaml

+1-1
Original file line numberDiff line numberDiff line change
@@ -167,4 +167,4 @@ skip_files:
167167
- ^(.*/)?polymer-all/labs/dfreedm/core-icon-study/.*
168168
- ^(.*/)?polymer-all/labs/.* # don't upload all of labs
169169
- ^(.*/)?polymer-all/tools/doc/.*
170-
- ^(.*/)?components/tools/.* # tool is already in /polymer-all
170+
- ^(.*/)?components/tools/.* # tool is already in /polymer-all

‎docs/polymer/icons.md

+203-14
Original file line numberDiff line numberDiff line change
@@ -9,29 +9,218 @@ subtitle: Guide
99

1010
{% include toc.html %}
1111

12-
{{site.project_title}} provides a standard set of SVG icons (styleable using CSS), elements for working with individual icons, and elements for working with icon sets.
12+
{{site.project_title}}'s Core Elements provide utility components
13+
for working with individual icons and icon sets.
1314

14-
TODO
15+
It includes a standard collection of SVG icons (styleable using CSS) as well as elements to
16+
create your own icon sets in SVG or bitmap, if needed.
1517

16-
## Basic usage
18+
## Installation
1719

18-
TODO
20+
This article describes the usage of four components: `core-icon`,
21+
`core-icons`, `core-iconset` and `core-iconset-svg`.
22+
You can install them using Bower:
1923

20-
<core-icon icon="search"></core-icon>
24+
bower install Polymer/core-icon
25+
bower install Polymer/core-icons
26+
bower install Polymer/core-iconset
27+
bower install Polymer/core-iconset-svg
2128

22-
Produces: <core-icon icon="search"></core-icon>
29+
The rest of this article assumes the components are
30+
installed in the `bower_components` directory.
2331

24-
## Using an icon set
2532

26-
- loading
27-
- using
33+
## Basic usage: core-icon
34+
35+
The simplest way of using Polymer icons is the `core-icon` element.
36+
To use it, import *core-icon.html* and declare an icon in your html:
37+
38+
<link rel="import" href="/bower_components/core-icon/core-icon.html">
39+
40+
<core-icon src="http://www.polymer-project.org/images/icons/android.svg"></core-icon>
41+
42+
Produces: <core-icon src="/images/icons/android.svg"></core-icon>
43+
44+
The source image is scaled to fit the icon size, which defaults to 24px square, and is used as the icon element’s background.
45+
46+
You can control the size of the icon using the `size` attribute. Since icons are always square, the `size` specifies both the width and the height of the icon, in pixels.
47+
48+
49+
<core-icon src="/images/icons/android.svg" size="24"></core-icon>
50+
<core-icon src="/images/icons/android.svg" size="32"></core-icon>
51+
<core-icon src="/images/icons/android.svg" size="48"></core-icon>
52+
53+
<core-icon src="/images/icons/android.svg" size="24"></core-icon>
54+
<core-icon src="/images/icons/android.svg" size="32"></core-icon>
55+
<core-icon src="/images/icons/android.svg" size="48"></core-icon>
56+
57+
The `src` attribute works well when you want to use a single icon. However, most of the time you need more than one, so Polymer makes it easy to work with *icon sets*.
58+
59+
60+
## Using Polymer's built-in icon sets
61+
62+
If you import `core-icons`, you get access to
63+
a whole range of predefined icon sets. To use an icon from an icon set, use the `icon` attribute instead of `src`:
64+
65+
<link rel="import" href="/bower_components/core-icons/core-icons.html">
66+
67+
<core-icon icon="polymer"></core-icon>
68+
69+
This loads the *polymer* icon from the default iconset: <core-icon icon="polymer"></core-icon>
70+
71+
In the *iconset* directory
72+
of `core-icons` you can find more interesting icon sets.
73+
If the icon is not part of the default icon set, it's name needs to be prefixed with the name of the icon set (e.g. `set:iconname`). For example:
74+
75+
<core-icon icon="social:cake"></core-icon>
76+
77+
This loads the *cake* icon from the *social* iconset: <core-icon icon="social:cake"></core-icon>
78+
79+
You can browse available icon sets on the
80+
[core-icons demo page](http://polymer.github.io/core-icons/components/core-icons/demo.html).
81+
82+
## Styling with CSS
83+
84+
Because icons in Polymer iconsets are SVG-based, you can control their appearance
85+
with CSS. For example, you can set properties like `fill`, `stroke` and `stroke-width` for your icons.
86+
87+
<style>
88+
core-icon[icon="android"] {
89+
fill: #9aed00;
90+
}
91+
</style>
92+
<core-icon icon="android" size="32"></core-icon>
93+
94+
<style>
95+
core-icon[icon="android"] {
96+
fill: #9aed00;
97+
}
98+
</style>
99+
Produces: <core-icon icon="android" size="32"></core-icon>
100+
101+
## Roll your own
102+
103+
The styling possibilities become even more exciting when you want to make
104+
your own icon sets. To create a custom icon set with SVG, import and declare
105+
`core-iconset-svg` in your html. Because SVG is just markup, you can put your
106+
SVG icons inside the `core-iconset-svg` element as its children.
107+
108+
<link rel="import" href="../bower_components/core-iconset-svg/core-iconset-svg.html">
109+
<core-iconset-svg id="custom-icons" iconSize="50">
110+
<svg>
111+
<defs>
112+
<g id="fancy-circles">
113+
<circle cx="25" cy="25" r="18" />
114+
<circle cx="12" cy="12" r="10" />
115+
<circle cx="35" cy="40" r="6" />
116+
</g>
117+
</defs>
118+
</svg>
119+
</core-iconset-svg>
120+
121+
Because the icons are defined as SVG, you can style them with CSS. Let's make
122+
our fancy circles even more fancy by adding some color:
123+
124+
<style type="text/css">
125+
core-icon circle {
126+
fill: #0b50bf;
127+
}
128+
core-icon circle:first-child {
129+
fill: #66bbff;
130+
}
131+
core-icon circle:last-child {
132+
fill: #0083ff;
133+
}
134+
</style>
135+
136+
Now you can display the icon using `core-icon` by referring to the `id` of the iconset and
137+
the `id` of a particular icon, joined by a colon. For example, to display the icon
138+
defined above use `custom-icons:fancy-circles` as `icon` attribute.
139+
140+
<core-icon icon="custom-icons:fancy-circles" size="30"></core-icon>
141+
142+
<style type="text/css">
143+
core-icon circle {
144+
fill: #0b50bf;
145+
}
146+
core-icon circle:first-child {
147+
fill: #66bbff;
148+
}
149+
core-icon circle:last-child {
150+
fill: #0083ff;
151+
}
152+
</style>
153+
<core-iconset-svg id="custom-icons" iconSize="50">
154+
<svg>
155+
<defs>
156+
<g id="fancy-circles">
157+
<circle cx="25" cy="25" r="18" />
158+
<circle cx="12" cy="12" r="10" />
159+
<circle cx="35" cy="40" r="6" />
160+
</g>
161+
</defs>
162+
</svg>
163+
</core-iconset-svg>
164+
Tadaa! Here's how your brand new icon looks: <core-icon icon="custom-icons:fancy-circles" size="30"></core-icon>
165+
166+
If you prefer to work with more traditional bitmap graphics like *jpg* or *png*,
167+
there is also an element for that: `core-iconset`.
168+
169+
Let's say you have a *png* file with your icons:
170+
171+
<a href="/components/core-iconset/my-icons.png" target="_blank">
172+
<img src="/components/core-iconset/my-icons.png">
173+
</a>
174+
175+
You can set the `src` attribute of `core-iconset` to point to this file.
176+
Icons are expected to be square and of the size specified
177+
by the `iconSize` property. If the icons are arranged over multiple rows, use the `width`
178+
attribute to specify the width of the image file. List the name of each icon in the `icons` attribute, in the same order as they appear
179+
in the image file.
180+
181+
<core-iconset id="custom-icons-png" src="/components/core-iconset/my-icons.png" width="96" iconSize="24"
182+
icons="location place starta stopb bus car train walk">
183+
</core-iconset>
184+
185+
Now you can refer to the icon using colon notation:
186+
187+
<core-icon icon="custom-icons-png:place"></core-icon>
188+
189+
<core-iconset id="custom-icons-png" src="/components/core-iconset/my-icons.png" width="96" iconSize="24"
190+
icons="location place starta stopb bus car train walk">
191+
</core-iconset>
192+
Produces: <core-icon icon="custom-icons-png:place"></core-icon>
193+
194+
## Icons in other core components
195+
196+
You can use icons on their own, but also use them with other elements, such as buttons. You can use the built-in and custom icon sets with any `core-` element that has an `icon` attribute. Remember to include the appropriate icon set
197+
before refering to an icon, otherwise the icon
198+
will not render.
199+
200+
Here is an example of `core-icon-button`, `core-menu-button` and `core-item` using
201+
icons from the *default* and *av* icon sets:
202+
203+
<link rel="import" href="/bower_components/core-icons/iconsets/av-icons.html">
204+
205+
<core-icon-button icon="av:play-arrow"></core-icon-button>
206+
<core-menu-button icon="menu">
207+
<core-item icon="settings" label="Settings"></core-item>
208+
</core-menu-button>
209+
210+
Produces: <core-icon-button icon="av:play-arrow"></core-icon-button>
211+
<core-menu-button icon="menu">
212+
<core-item icon="settings" label="Settings"></core-item>
213+
</core-menu-button>
214+
215+
## Summary
216+
217+
You just learned how to import Polymer's ready-made icon sets,
218+
display an icon using the `core-icon` element and style it with CSS. You also learned
219+
how to create your own icon set using SVG or bitmap images and how to use icons
220+
from other elements that support this feature.
221+
28222

29-
## Icon buttons
30223

31-
- how they differ
32-
- what they do
33224

34-
## Styling
35225

36-
- how to use `fill` to style the inner SVG
37226

‎elements/common_elements.html

+7
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,15 @@
2727
<link rel="import" href="../elements/page-scrim.html">
2828
<link rel="import" href="../elements/dropdown-panel.html">
2929

30+
<link rel="import" href="../components/core-icon/core-icon.html">
31+
<link rel="import" href="../components/core-icon-button/core-icon-button.html">
3032
<link rel="import" href="../components/core-icons/core-icons.html">
33+
<link rel="import" href="../components/core-icons/iconsets/av-icons.html">
3134
<link rel="import" href="../components/core-icons/iconsets/social-icons.html">
35+
<link rel="import" href="../components/core-iconset/core-iconset.html">
36+
<link rel="import" href="../components/core-iconset-svg/core-iconset-svg.html">
37+
<link rel="import" href="../components/core-item/core-item.html">
38+
<link rel="import" href="../components/core-menu-button/core-menu-button.html">
3239
<link rel="import" href="../components/paper-button/paper-button.html">
3340

3441
<!--<link rel="import" href="../components/core-tooltip/core-tooltip.html">-->

‎images/icons/android.svg

+27
Loading

0 commit comments

Comments
 (0)