icon-placeholder v0.0.1
@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
<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
5 years ago