icon-placeholder

v0.0.1

Published

2 years ago

This element generates a themed circle with a svg icon, or polymer's iron icon.

Downloads

0High
0Medium
0Low

k.shimrock.mesh

@meshdev/icon-placeholder

A circular icon placeholder for words. Magic Placeholder

Description of IconPlaceholder

This element generates a themed circle with a svg icon, or polymer's iron icon.

Installation

clone:

https://github.com/MeshMyCampus/icon-placeholder.git

install:

$ npm install

test/run:

$ polymer serve

Element Details

Properties

theme
- type: Object
primaryColor
- type: String
secondaryColor
- type: String
size
- type: Number

Attributes

darkmode
- type: Boolean
invertedColors
- type: Boolean
testing
- type: Boolean

Example Usage Normal HTML

This is an example where Icon Placeholder is being used in a normal HTML File

<icon-placeholder size="50"></icon-placeholder>

Example Usage LitElement

This is an example where Icon Placeholder is being used in LitElement where the parent element has a size property that is being passed in to the icon-placeholder element

<icon-placeholder .size="${this.size}"></icon-placeholder>

Theming Icon Placeholder

Icon Placeholder can accept a theme object of the following format, which at minimum must include a primary color, secondary color, primary color lighter. Anything additional will not be utilized.

const theme = {
  darkTheme: {
    primaryColor: "#FB8C00",
    secondaryColor: "#FFe8b2"
  },
  lightTheme: {
    primaryColor: "#FB8C00",
    secondaryColor: "#FFe8b2"
  }
};

Example Enabling DarkMode in Normal HTML

This is an example where IconPlaceholder is being used in a normal HTML File. Dark Mode is an attribute so it simply needs to be present.

<icon-placeholder darkMode></icon-placeholder>

Example Enabling DarkMode in LitElement

This is an example where Icon Placeholder is being used in LitElement where the parent element has a darkMode property that is being passed in to the icon-placeholder element.

<icon-placeholder ?darkMode="${this.darkmode}"></icon-placeholder>

Complete Example in Normal HTML

In this example and svg is implemented, DarkMode is enabled, and testing is also enabled allowing for synthetic dummy data - NOT receiving data from its parent.

<icon-placeholder testing darkmode>
  <svg viewBox="0 0 50 50" slot="icon">
    <path
      d="M 25 2 C 23.894531 2 23 2.894531 23 4 C 23 4.714844 23.382813 5.371094 24 5.726563 L 24 7.046875 C 20.8125 7.265625 18.59375 8.496094 17.203125 9.757813 C 15.671875 11.152344 15.074219 12.628906 15.074219 12.628906 L 15 12.808594 L 15 18 L 13 18 L 13 21 L 11.730469 21 C 11.371094 20.382813 10.714844 20 10 20 C 8.894531 20 8 20.894531 8 22 C 8 23.105469 8.894531 24 10 24 C 10.714844 24 11.375 23.617188 11.730469 23 L 13 23 L 13 26 L 15 26 L 15 28.195313 L 15.074219 28.375 C 15.074219 28.375 16.160156 30.808594 19 32.457031 L 19 35.800781 L 5 40.910156 L 5 48 L 45 48 L 45 40.910156 L 31 35.800781 L 31 32.457031 C 33.839844 30.808594 34.925781 28.375 34.925781 28.375 L 35 28.195313 L 35 26 L 37 26 L 37 23 L 38.269531 23 C 38.628906 23.617188 39.285156 24 40 24 C 41.105469 24 42 23.105469 42 22 C 42 20.894531 41.105469 20 40 20 C 39.285156 20 38.625 20.382813 38.269531 21 L 37 21 L 37 18 L 35 18 L 35 12.808594 L 34.925781 12.628906 C 34.925781 12.628906 34.328125 11.152344 32.796875 9.757813 C 31.40625 8.496094 29.1875 7.265625 26 7.046875 L 26 5.730469 C 26.617188 5.375 27 4.714844 27 4 C 27 2.894531 26.105469 2 25 2 Z M 24.878906 9.007813 C 24.960938 9.015625 25.042969 9.015625 25.125 9.007813 C 28.308594 9.035156 30.25 10.148438 31.453125 11.238281 C 32.617188 12.296875 32.964844 13.191406 33 13.277344 L 33 20 L 35 20 L 35 21.832031 C 34.980469 21.941406 34.980469 22.050781 35 22.15625 L 35 24 L 33 24 L 33 27.742188 C 32.921875 27.929688 32.121094 29.777344 29.5625 31.03125 L 29 31.300781 L 29 37.199219 L 29.65625 37.4375 L 43 42.308594 L 43 46 L 33 46 L 33 42 L 17 42 L 17 46 L 7 46 L 7 42.308594 L 21 37.199219 L 21 31.300781 L 20.4375 31.03125 C 17.878906 29.777344 17.078125 27.929688 17 27.742188 L 17 24 L 15 24 L 15 22.167969 C 15.019531 22.058594 15.019531 21.949219 15 21.84375 L 15 20 L 17 20 L 17 13.277344 C 17.035156 13.191406 17.382813 12.296875 18.546875 11.238281 C 19.75 10.148438 21.691406 9.035156 24.878906 9.007813 Z M 19 20 L 19 23 L 22 23 L 22 20 Z M 28 20 L 28 23 L 31 23 L 31 20 Z M 19 44 L 31 44 L 31 46 L 19 46 Z "
    />
  </svg>
</icon-placeholder>

Complete Example in LitElement

In this case IconPlaceholder is being used in a LitElement, aka it is a child of a LitElement Parent, which is passing in a theme, an svg, and setting darkMode to true or false.


constructor(){
    this.icon = `<svg viewBox="0 0 50 50">
                    <path d="M 25 2 C 23.894531 2 23 2.894531 23 4 C 23 4.714844 23.382813 5.371094 24 5.726563 L 24 7.046875 C 20.8125 7.265625 18.59375 8.496094 17.203125 9.757813 C 15.671875 11.152344 15.074219 12.628906 15.074219 12.628906 L 15 12.808594 L 15 18 L 13 18 L 13 21 L 11.730469 21 C 11.371094 20.382813 10.714844 20 10 20 C 8.894531 20 8 20.894531 8 22 C 8 23.105469 8.894531 24 10 24 C 10.714844 24 11.375 23.617188 11.730469 23 L 13 23 L 13 26 L 15 26 L 15 28.195313 L 15.074219 28.375 C 15.074219 28.375 16.160156 30.808594 19 32.457031 L 19 35.800781 L 5 40.910156 L 5 48 L 45 48 L 45 40.910156 L 31 35.800781 L 31 32.457031 C 33.839844 30.808594 34.925781 28.375 34.925781 28.375 L 35 28.195313 L 35 26 L 37 26 L 37 23 L 38.269531 23 C 38.628906 23.617188 39.285156 24 40 24 C 41.105469 24 42 23.105469 42 22 C 42 20.894531 41.105469 20 40 20 C 39.285156 20 38.625 20.382813 38.269531 21 L 37 21 L 37 18 L 35 18 L 35 12.808594 L 34.925781 12.628906 C 34.925781 12.628906 34.328125 11.152344 32.796875 9.757813 C 31.40625 8.496094 29.1875 7.265625 26 7.046875 L 26 5.730469 C 26.617188 5.375 27 4.714844 27 4 C 27 2.894531 26.105469 2 25 2 Z M 24.878906 9.007813 C 24.960938 9.015625 25.042969 9.015625 25.125 9.007813 C 28.308594 9.035156 30.25 10.148438 31.453125 11.238281 C 32.617188 12.296875 32.964844 13.191406 33 13.277344 L 33 20 L 35 20 L 35 21.832031 C 34.980469 21.941406 34.980469 22.050781 35 22.15625 L 35 24 L 33 24 L 33 27.742188 C 32.921875 27.929688 32.121094 29.777344 29.5625 31.03125 L 29 31.300781 L 29 37.199219 L 29.65625 37.4375 L 43 42.308594 L 43 46 L 33 46 L 33 42 L 17 42 L 17 46 L 7 46 L 7 42.308594 L 21 37.199219 L 21 31.300781 L 20.4375 31.03125 C 17.878906 29.777344 17.078125 27.929688 17 27.742188 L 17 24 L 15 24 L 15 22.167969 C 15.019531 22.058594 15.019531 21.949219 15 21.84375 L 15 20 L 17 20 L 17 13.277344 C 17.035156 13.191406 17.382813 12.296875 18.546875 11.238281 C 19.75 10.148438 21.691406 9.035156 24.878906 9.007813 Z M 19 20 L 19 23 L 22 23 L 22 20 Z M 28 20 L 28 23 L 31 23 L 31 20 Z M 19 44 L 31 44 L 31 46 L 19 46 Z "
                    />
                </svg>`;
}

<icon-placeholder
  .icon="${this.icon}"
  ?darkMode="${this.darkMode}"
></icon-placeholder>

Enable Testing

<icon-placeholder testing="true"></icon-placeholder>

Dependencies

lit-element
- NPM
- Site