From 3fa8e7d8a5c2c0ba74c133f0492e37640d5529b2 Mon Sep 17 00:00:00 2001 From: pnogal Date: Mon, 27 Jan 2020 13:02:27 -0600 Subject: [PATCH] Include Font Awesome and Material Icons --- index.html | 61 +++++++---------------------------- package-lock.json | 2 +- package.json | 2 +- src/content/myuw-icon-link.js | 16 ++++----- src/content/utils.js | 14 ++++---- src/index.js | 16 +++++++++ 6 files changed, 45 insertions(+), 66 deletions(-) diff --git a/index.html b/index.html index 6eb1107..f222a19 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,7 @@ body { background: #cccccc; } + .demo__container { display: grid; grid-template-columns: repeat(auto-fit, 290px); @@ -13,58 +14,20 @@
- - - + + + - - - - + + + + - - - - + + + +
diff --git a/package-lock.json b/package-lock.json index 6183588..73948f4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@myuw-web-components/myuw-card", - "version": "1.3.1", + "version": "1.3.2", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 0ebc3f3..8e489f9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@myuw-web-components/myuw-card", - "version": "1.3.1", + "version": "1.3.2", "description": "", "module": "dist/myuw-card.min.mjs", "browser": "dist/myuw-card.js", diff --git a/src/content/myuw-icon-link.js b/src/content/myuw-icon-link.js index 2ae2304..3bfbfea 100644 --- a/src/content/myuw-icon-link.js +++ b/src/content/myuw-icon-link.js @@ -6,9 +6,9 @@ export class MyUWIconLink extends HTMLElement { } static get template() { - if (this._template === undefined) { - this._template = document.createElement("template"); - this._template.innerHTML = ` + if (this._template===undefined) { + this._template=document.createElement("template"); + this._template.innerHTML=` @@ -44,19 +44,19 @@ export class MyUWIconLink extends HTMLElement { this.shadowRoot .getElementById("container") .appendChild(createIconElement(this.iconType, this.icon)); - this.shadowRoot.getElementById("link").href = this.href; + this.shadowRoot.getElementById("link").href=this.href; } get icon() { - return this.getAttribute("icon") || ""; + return this.getAttribute("icon")||""; } get iconType() { - return this.getAttribute("icon-type") || ""; + return this.getAttribute("icon-type")||""; } get href() { - return this.getAttribute("href") || "#"; + return this.getAttribute("href")||"#"; } } diff --git a/src/content/utils.js b/src/content/utils.js index 2da05ad..41169e6 100644 --- a/src/content/utils.js +++ b/src/content/utils.js @@ -1,12 +1,12 @@ -export const iconMap = { +export const iconMap={ md: { styleUrl: "https://fonts.googleapis.com/icon?family=Material+Icons", classes: "material-icons md-70", }, fa: { styleUrl: - "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css", - classes: "fa fa-70", + "https://use.fontawesome.com/releases/v5.1.0/css/all.css", + classes: "fa-70" }, }; @@ -15,12 +15,12 @@ export const iconMap = { * @param {string|undefined} icon * @returns HTMLElement */ -export function createIconElement(iconType, icon = undefined) { - const node = document.createElement("i"); +export function createIconElement(iconType, icon=undefined) { + const node=document.createElement("i"); switch (iconType) { case "md": { node.setAttribute("class", iconMap.md.classes); - node.innerText = icon; + node.innerText=icon; break; } case "fa": { @@ -37,7 +37,7 @@ export function createIconElement(iconType, icon = undefined) { * @returns HTMLElement */ export function createStyleElement(iconType) { - const node = document.createElement("link"); + const node=document.createElement("link"); node.setAttribute("rel", "stylesheet"); node.setAttribute("href", iconMap[iconType].styleUrl); return node; diff --git a/src/index.js b/src/index.js index 61cd40f..54661e4 100644 --- a/src/index.js +++ b/src/index.js @@ -11,3 +11,19 @@ export { MyUWCardMessage, MyUWIconLink, }; + +// Include Font Awesome Icons +(function () { + var fontAwesomeInclude=document.createElement('link'); + fontAwesomeInclude.href='https://use.fontawesome.com/releases/v5.12.0/css/all.css'; + fontAwesomeInclude.rel='stylesheet'; + document.getElementsByTagName('head')[0].appendChild(fontAwesomeInclude); +})(); + +// Include Material Icons +(function () { + var matIconsInclude=document.createElement('link'); + matIconsInclude.href='https://fonts.googleapis.com/icon?family=Material+Icons'; + matIconsInclude.rel='stylesheet'; + document.getElementsByTagName('head')[0].appendChild(matIconsInclude); +})();