Starcounter
HomeDownloadDocsCommunity
2.3.1
2.3.1
  • Starcounter Documentation
  • Getting Started
  • Starcounter
    • Collapsing the Stack
      • Complexity and Scalability Tradeoff
      • The Future of Micro-Services
      • 10 Benefits of Collapsing the Stack
    • Integrated Database and Web Server
  • Hello World - Tutorial
    • Create a Database Class
    • Create a Real Time UI
    • First Interactive UI
    • Computed Properties
    • Expense Tracker
    • Cancel and Delete
    • The Next Step
  • Guides
    • Database
      • Database Classes
      • Data manipulation
      • Object Identity and Object References
      • Querying with SQL
      • Data Types
      • Relations
      • Inheritance
      • Sharing data
      • Database Configuration
      • Comparing Database Objects
      • Referential Integrity and Constraints
    • SQL
      • Identifiers
      • Path Expressions
      • Data operators
      • Joins
      • Aggregates
      • Comparisons and Logical Operators
      • Sorting
      • Fetch
      • Offset Key
      • Indexes
      • Literals
      • Query Plan Hints
      • Reserved words
      • Query for Database Classes
      • SQL Isolation Between Applications
    • Transactions
      • Short-Running Transactions
      • Long running transactions
      • Using Transactions
      • Running Background Jobs
      • Commit Hooks
    • Typed JSON
      • JSON-by-example
      • Code-Behind
      • Data Bindings
      • Callback Methods
      • Responding with JSON
      • Accepting JSON in Requests
      • Primitive Arrays and Single Value Types
      • Typed JSON Internals
    • Blendable Web Apps
      • Starcounter MVVM
      • Palindrom
      • Client-Side Stack
      • Sessions
      • HTML Views
      • App Shell
      • Web Components
      • View Attaching
      • View Composing
      • HTML Compositions
      • HTML Views Blending Guidelines
      • Avoiding CSS conflicts
      • Debugging
    • Network
      • HTTP
      • Internal Self Calls
      • Middleware
      • Anonymous or Substitute Handlers
      • URL Aliases and Redirects
      • Network Gateway
      • Static File Server
      • External HTTP Calls
      • WebSocket
      • Avoiding URI conflicts
      • TCP Sockets
      • UDP Sockets
    • Publishing Apps
    • Working with Starcounter
      • Release Channels
      • Starting and Stopping Apps
      • Administrator Web UI
      • Star CLI
      • StarAdmin CLI
      • StarDump CLI
      • Working in Visual Studio
      • Error Log
      • Using HTTPS on NGINX
      • Using HTTPS on IIS
      • Run Starcounter in Production
      • Weaver
      • Investigating App Crashes
      • Configuration Structure
      • Database Refactoring
      • Using Unload/Reload to Modify Database Schema
      • Kernel Questions and Answers
      • Log Files
  • Cookbook
    • Attach an HTTP Request to an Existing Long-Running Transaction
    • Cookie-Based Authentication
    • Timestamp on Object Creation
    • Creating Strongly Typed JSON Collections
    • Migrating From 2.2 to 2.3+
    • Multiple Pages
    • Icons
    • Proposed Project Structure
    • Acceptance Testing with Selenium
    • Requesting a User to Authenticate
    • How to delete unused tables and columns
Powered by GitBook
On this page
  • Icon Size
  • Insert an SVG Button Icon and Restyle It
  1. Cookbook

Icons

PreviousMultiple PagesNextProposed Project Structure

Last updated 7 years ago

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

  • as the link to the default entrypoint in the

Icon Size

The default icon size should be 24x24 pixels.

This happens to be the default size in Polymer (). It is one of the standard icon sizes in many icon packs, such as and .

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:

<button class="CompositionEditor-resetbutton" slot="CompositionEditor/icon" on-click="toggleEditing" aria-label="Brush icon">
    <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">
        <use xlink:href="/CompositionEditor/images/layout-editor.svg#Page-1"/>
    </svg>
</button>

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:

<template is="starcounter-composition">
    <style>
        .icon-holder {
            width: 24px;
            height: 24px;
            background: #FFFFFF;
            font-size: 0;
            padding: 3px;
            box-sizing: border-box;
            fill: #000000;
        }

        .icon-holder ::content button {
            width: 100%;
            height: 100%;
        }

        .compositioneditor-shadowcss-fix > .icon-holder button {
            width: 100%;
            height: 100%;
        }

        .icon-holder ::content [active],
        .icon-holder:hover {
            cursor: pointer;
            fill: #E0115F;
        }

        .compositioneditor-shadowcss-fix > .icon-holder [active],
        .compositioneditor-shadowcss-fix > .icon-holder:hover {
            cursor: pointer;
            fill: #E0115F;
        }
    </style>
    <div class="icon-holder">
        <content select="[slot='CompositionEditor/icon']"></content>
    </div>
</template>
<script>
    (function() {
        // :host and ::content selectors are not supported by WC v0 polyfill
        // so a custom script is needed to make it work in browsers other than Chrome
        // TODO: Re-evaluate the need once webcomponents.js#V1 is shipped.
        // see https://github.com/StarcounterPrefabs/Launcher/pull/266#issuecomment-273434475
        if (window.ShadowDOMPolyfill) {
            var template = document.currentScript.previousElementSibling;
            template.parentNode.classList.add('compositioneditor-shadowcss-fix');
        }
    })();
</script>

Reference example:

Launchpad
iron-icon
Visualpharm
Icons8
CompositionEditor Master.html
CompositionEditor layout-editor.svg