@meshdev/icon-placeholder
A circular icon placeholder for words.
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
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
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.
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.
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.
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.
{ thisicon = `<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>`;}
Enable Testing