2.3.2
Icons
The preferred icon format is SVG.
Why SVG? With SVG you can do things like change the color
:hover, animate, etc.Why not other formats? We do not use icon fonts, because they have conflicts when multiple apps use them, they require CSS hacks to restyle them. We do not use PNGs because they are look bad on retina screens and are hard to change, style and animate.
Every app should have a black and white icon that appears:
- as the package icon in the Warehouse
Icon Size
The default icon size should be 24x24 pixels.
This happens to be the default size in Polymer (
iron-icon). It is one of the standard icon sizes in many icon packs, such as Visualpharm and Icons8.Insert an SVG Button Icon and Restyle It
The icon should not have a
fill attribute anywhere inside of the SVG file. Otherwise, it will be harder to style it from CSS.In the
dom-bind part of your partial define a <button> that includes an inline SVG or and inline SVG with <use> reference to an external file:1
<button class="CompositionEditor-resetbutton" slot="CompositionEditor/icon" on-click="toggleEditing" aria-label="Brush icon">
2
<svg modified$="{{model.layoutModified$}}" active$="{{model.editingMode$}}" viewBox="0 0 74 76" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3
<use xlink:href="/CompositionEditor/images/layout-editor.svg#Page-1"/>
4
</svg>
5
</button>
Copied!
Now, the above SVG and its paths can be styled using CSS in the
starcounter-composition part. The below code includes a fix that makes SVG content styleable in browsers other than Chrome:1
<template is="starcounter-composition">
2
<style>
3
.icon-holder {
4
width: 24px;
5
height: 24px;
6
background: #FFFFFF;
7
font-size: 0;
8
padding: 3px;
9
box-sizing: border-box;
10
fill: #000000;
11
}
12
​
13
.icon-holder ::content button {
14
width: 100%;
15
height: 100%;
16
}
17
​
18
.compositioneditor-shadowcss-fix > .icon-holder button {
19
width: 100%;
20
height: 100%;
21
}
22
​
23
.icon-holder ::content [active],
24
.icon-holder:hover {
25
cursor: pointer;
26
fill: #E0115F;
27
}
28
​
29
.compositioneditor-shadowcss-fix > .icon-holder [active],
30
.compositioneditor-shadowcss-fix > .icon-holder:hover {
31
cursor: pointer;
32
fill: #E0115F;
33
}
34
</style>
35
<div class="icon-holder">
36
<content select="[slot='CompositionEditor/icon']"></content>
37
</div>
38
</template>
39
<script>
40
(function() {
41
// :host and ::content selectors are not supported by WC v0 polyfill
42
// so a custom script is needed to make it work in browsers other than Chrome
43
// TODO: Re-evaluate the need once webcomponents.js#V1 is shipped.
44
// see https://github.com/StarcounterPrefabs/Launcher/pull/266#issuecomment-273434475
45
if (window.ShadowDOMPolyfill) {
46
var template = document.currentScript.previousElementSibling;
47
template.parentNode.classList.add('compositioneditor-shadowcss-fix');
48
}
49
})();
50
</script>
Copied!
Reference example:
Last modified 3yr ago
Copy link