/*
Sargent Coding Icons
Designed + developed with 🌸 by Aetinx
*/
var icons = {
accessibility: ``,
"accessibility.isa": ``,
"accessibility.isa.modified": ``,
aeroplane: ``,
album: ``,
alt: ``,
animation: ``,
antenna: ``,
archive: ``,
"arrow.big.down": ``,
"arrow.big.left": ``,
"arrow.big.right": ``,
"arrow.big.up": ``,
"arrow.caret.down": ``,
"arrow.caret.left": ``,
"arrow.caret.right": ``,
"arrow.caret.triangle.down": ``,
"arrow.caret.triangle.left": ``,
"arrow.caret.triangle.right": ``,
"arrow.caret.triangle.up": ``,
"arrow.caret.up": ``,
"arrow.circle.check": ``,
"arrow.clockwise": ``,
"arrow.clockwise.counter": ``,
"arrow.corners": ``,
"arrow.diagonal": ``,
"arrow.diagonal.alt": ``,
"arrow.down": ``,
"arrow.down.left": ``,
"arrow.down.right": ``,
"arrow.horizontal": ``,
"arrow.in": ``,
"arrow.left": ``,
"arrow.long.down": ``,
"arrow.long.left": ``,
"arrow.long.right": ``,
"arrow.long.up": ``,
"arrow.out": ``,
"arrow.redo": ``,
"arrow.right": ``,
"arrow.sides": ``,
"arrow.turning": ``,
"arrow.undo": ``,
"arrow.up": ``,
"arrow.up.left": ``,
"arrow.up.right": ``,
"arrow.vertical": ``,
at: ``,
backpack: ``,
backward: ``,
badge: ``,
bag: ``,
"bag.shopping": ``,
bandage: ``,
bang: ``,
"bang.circle": ``,
"bang.octagon": ``,
"bang.triangle": ``,
banner: ``,
barcode: ``,
baseball: ``,
bash: ``,
basketball: ``,
battery: ``,
"battery.1": ``,
"battery.2": ``,
"battery.3": ``,
"battery.4": ``,
"battery.5": ``,
"battery.6": ``,
"battery.7": ``,
"battery.8": ``,
"battery.9": ``,
"battery.charging": ``,
"battery.full": ``,
bed: ``,
beginning: ``,
bell: ``,
"bell.badge": ``,
"bell.slash": ``,
biscuit: ``,
bluetooth: ``,
"bluetooth.connected": ``,
"bluetooth.searching": ``,
bold: ``,
bolt: ``,
book: ``,
"book.check": ``,
"book.check.rtl": ``,
"book.letter": ``,
"book.letter.iw": ``,
"book.letter.ja": ``,
"book.letter.kr": ``,
"book.question": ``,
"book.rtl": ``,
borderRadius: ``,
brackets: ``,
"brand.behance": ``,
"brand.desmos": ``,
"brand.discord": ``,
"brand.douyin": ``,
"brand.facebook": ``,
"brand.figma": ``,
"brand.github": ``,
"brand.glitch": ``,
"brand.google": ``,
"brand.google.drive": ``,
"brand.instagram": ``,
"brand.jumblejot": ``,
"brand.microsoft": ``,
"brand.ok": ``,
"brand.openSource": ``,
"brand.pixiv": ``,
"brand.polywork": ``,
"brand.reddit": ``,
"brand.saco": ``,
"brand.snapchat": ``,
"brand.throne": ``,
"brand.tldraw": ``,
"brand.tumblr": ``,
"brand.twitch": ``,
"brand.twitter": ``,
"brand.vk": ``,
"brand.wasteof": ``,
"brand.xbox": ``,
briefcase: ``,
"briefcase.medical": ``,
brush: ``,
bucket: ``,
bug: ``,
"button.cool": ``,
"button.free": ``,
"button.new": ``,
"button.ng": ``,
"button.ok": ``,
"button.up": ``,
c: ``,
"c.plusplus": ``,
"c.sharp": ``,
calculator: ``,
calendar: ``,
call: ``,
"call.check": ``,
"call.down": ``,
"call.end": ``,
"call.forward": ``,
"call.inbound": ``,
"call.missed": ``,
"call.no": ``,
"call.outbound": ``,
"call.park": ``,
"call.pause": ``,
"call.plus": ``,
"call.x": ``,
camera: ``,
canvas: ``,
capsLock: ``,
captions: ``,
car: ``,
"card.credit": ``,
"card.credit.badge.clock": ``,
"card.gift": ``,
"card.person": ``,
"card.sd": ``,
"card.sim": ``,
cart: ``,
"cart.badge.plus": ``,
cassette: ``,
"chart.bar": ``,
"chart.kanban": ``,
"chart.line": ``,
"chart.line.down": ``,
"chart.pie": ``,
check: ``,
"check.circle": ``,
"check.square": ``,
circle: ``,
clipboard: ``,
clock: ``,
"clock.alarm": ``,
"clock.badge.plus": ``,
"clock.digital": ``,
cloud: ``,
"cloud.rain": ``,
command: ``,
comment: ``,
"comment.question": ``,
"comment.two": ``,
contextMenu: ``,
contrast: ``,
controller: ``,
copy: ``,
crop: ``,
cross: ``,
"cross.circle": ``,
css: ``,
cube: ``,
cursor: ``,
"cursor.arrow": ``,
"delete.left": ``,
"delete.right": ``,
diamond: ``,
disc: ``,
"drive.disc": ``,
"drive.external": ``,
"drive.internal": ``,
earth: ``,
ellipsis: ``,
"ellipsis.circle": ``,
"ellipsis.vertical": ``,
"ellipsis.vertical.circle": ``,
end: ``,
envelope: ``,
"envelope.badge": ``,
"envelope.open": ``,
enye: ``,
eraser: ``,
escape: ``,
eszett: ``,
export: ``,
eye: ``,
"eye.slash": ``,
eyedropper: ``,
"face.anguish": ``,
"face.annoyed": ``,
"face.confused": ``,
"face.dotted": ``,
"face.drooling": ``,
"face.eyebrow": ``,
"face.flushed": ``,
"face.grinning": ``,
"face.happy": ``,
"face.lair": ``,
"face.mad": ``,
"face.mouthless": ``,
"face.nervous": ``,
"face.neutral": ``,
"face.openMouth": ``,
"face.owo": ``,
"face.owo.warm": ``,
"face.refreshed": ``,
"face.sad": ``,
"face.silly": ``,
"face.smug": ``,
facemask: ``,
factory: ``,
fax: ``,
figure: ``,
"figure.distancing": ``,
"figure.karate": ``,
"figure.split": ``,
"figure.stick": ``,
file: ``,
"file.badge.plus": ``,
"file.badge.up": ``,
film: ``,
flag: ``,
folder: ``,
"folder.badge.plus": ``,
"folder.badge.up": ``,
football: ``,
"football.american": ``,
forward: ``,
fullscreen: ``,
gift: ``,
globe: ``,
"globe.badge.clock": ``,
graph: ``,
h: ``,
"header.1": ``,
"header.2": ``,
"header.3": ``,
"header.4": ``,
"header.5": ``,
"header.6": ``,
headphones: ``,
heart: ``,
"heart.fill": ``,
"heart.fill.left": ``,
"heart.fill.right": ``,
hexagon: ``,
highlight: ``,
home: ``,
hourglass: ``,
html: ``,
id: ``,
image: ``,
"image.broken": ``,
import: ``,
inbox: ``,
"inbox.full": ``,
infinity: ``,
info: ``,
inspect: ``,
interrobang: ``,
italic: ``,
javascript: ``,
json: ``,
"kana.a": ``,
key: ``,
keyboard: ``,
laptop: ``,
"laptop.and.phone": ``,
"laptop.badge.plus": ``,
"laptop.bsod": ``,
"laptop.wsod": ``,
lasso: ``,
layers: ``,
leaf: ``,
"leaf.circle": ``,
leave: ``,
lifepreserver: ``,
lightbulb: ``,
line: ``,
link: ``,
list: ``,
"list.ordered": ``,
location: ``,
lock: ``,
"lock.open": ``,
lolcode: ``,
macintosh: ``,
"macintosh.sad": ``,
"magnify.left": ``,
"magnify.left.minus": ``,
"magnify.left.one": ``,
"magnify.left.plus": ``,
"magnify.right": ``,
"magnify.right.minus": ``,
"magnify.right.one": ``,
"magnify.right.plus": ``,
map: ``,
markdown: ``,
maths: ``,
"maths.function": ``,
"maths.percent": ``,
"maths.sum": ``,
menu: ``,
"menu.circle": ``,
mic: ``,
"mic.slash": ``,
minus: ``,
"minus.circle": ``,
missing: ``,
monitor: ``,
"monitor.bsod": ``,
moon: ``,
"moon.circle": ``,
"moon.sparkles": ``,
mouse: ``,
network: ``,
new: ``,
no: ``,
"no.eighteen": ``,
"no.phone": ``,
note: ``,
"note.beamed": ``,
notes: ``,
octagon: ``,
open: ``,
option: ``,
overflow: ``,
package: ``,
palette: ``,
"pane.left": ``,
"pane.right": ``,
"panel.bottom": ``,
"panel.bottom.bar": ``,
"panel.bottom.left": ``,
"panel.bottom.right": ``,
"panel.full": ``,
"panel.left": ``,
"panel.left.bar": ``,
"panel.right": ``,
"panel.right.bar": ``,
"panel.top": ``,
"panel.top.bar": ``,
"panel.top.left": ``,
"panel.top.right": ``,
paperclip: ``,
"paperclip.bent": ``,
"paperclip.clippy": ``,
"paperclip.horizontal": ``,
parking: ``,
pause: ``,
pencil: ``,
pentagon: ``,
person: ``,
"person.badge.plus": ``,
"person.circle": ``,
phone: ``,
"phone.alert": ``,
"phone.dumb": ``,
php: ``,
piano: ``,
pin: ``,
play: ``,
plus: ``,
"plus.circle": ``,
polyline: ``,
power: ``,
preferences: ``,
printer: ``,
projection: ``,
projector: ``,
puzzle: ``,
"puzzle.badge.plus": ``,
python: ``,
qr: ``,
question: ``,
"question.circle": ``,
"rect.horizontal": ``,
"rect.vertical": ``,
rename: ``,
rubbishBin: ``,
"rubbishBin.full": ``,
ruby: ``,
rust: ``,
s: ``,
save: ``,
scanner: ``,
scissors: ``,
scribble: ``,
selectAll: ``,
selection: ``,
settings: ``,
share: ``,
"share.android": ``,
shield: ``,
"shield.chequered": ``,
sparkle: ``,
sparkles: ``,
speaker: ``,
"speaker.0": ``,
"speaker.1": ``,
"speaker.2": ``,
"speaker.none": ``,
spellcheck: ``,
square: ``,
star: ``,
"star.asterik": ``,
"star.asterik.circle": ``,
"star.eight": ``,
"star.fill": ``,
"star.fill.left": ``,
"star.fill.right": ``,
"star.four": ``,
"star.life": ``,
"star.life.circle": ``,
"star.tray": ``,
stereo: ``,
storage: ``,
strikethrough: ``,
subtitles: ``,
suitcase: ``,
sun: ``,
"sun.dim": ``,
svg: ``,
tab: ``,
table: ``,
tablet: ``,
"tablet.drawing": ``,
"tablet.duo": ``,
tag: ``,
teardrop: ``,
"teardrop.down": ``,
tennis: ``,
terminal: ``,
text: ``,
"text.align.centre": ``,
"text.align.justified": ``,
"text.align.left": ``,
"text.align.right": ``,
"text.colour": ``,
"text.font": ``,
"text.size": ``,
toolbox: ``,
translate: ``,
triangle: ``,
tv: ``,
"tv.4k": ``,
"tv.hdr": ``,
underline: ``,
usb: ``,
video: ``,
voicemail: ``,
watch: ``,
"watch.digital": ``,
wc: ``,
wifi: ``,
"wifi.1": ``,
"wifi.2": ``,
"wifi.3": ``,
"wifi.badge.plus": ``,
"wifi.slash": ``,
x: ``,
"x.circle": ``,
xml: ``,
}
// Class to manage icons
class Icon extends HTMLElement {
static get observedAttributes() {
return ["name"];
}
get name() {
return this.getAttribute("name");
}
set name(newName) {
this.setAttribute("name", newName);
}
constructor(initName) {
super();
let style = document.createElement("style");
style.textContent = `saco-icon {display: inline-block; height: 1em; aspect-ratio: 1 / 1; transform: scale(1.3)} saco-icon svg {display: inline-block; height: 100%; width: 100%; min-height: 100%; min-width: 100%;} saco-icon svg *[fill] {fill: currentColor;} saco-icon svg *[stroke] { stroke: currentColor;}`
this.update = () => {
let symbol = icons[this.name];
this.innerHTML = symbol || icons.missing;
if (!symbol) {
console.warn(`Failed to load icon "${this.name}".`);
this.title = this.name;
} else {
this.removeAttribute("title");
}
this.style.opacity = symbol ? 1 : 0.5;
this.append(style);
}
if (initName) this.name = initName;
}
connectedCallback() {}
attributeChangedCallback(name, older, newer) {
this.update();
}
};
customElements.define("saco-icon", Icon);