Using SVG icons

readme.md

SVG icons with custom elements:

1. Create your icons. Boxy SVG is perfect for this. Note that this assumes a viewBox of 0,0,128,128.
2. Save this file, say in /css/icons.svg
3. Include the b-icon.js somewhere.
4. You can then use <b-icon name="hamburger" color="#fff" size="64px"></b-icon> in your HTML
5. You can easily extend this as necessary.

That's it!

b-icon.js

customElements.define ("b-icon", class extends HTMLElement
{
	static get observedAttributes ()
	{
		return ["name", "color", "size"]
	}

	_set_icon ()
	{
		let name = this.getAttribute ("name")
		this.innerHTML = `<svg viewBox="0 0 128 128"><use xlink:href="/css/icons.svg#${name}"></use></svg>`

		let color = this.getAttribute ("color") || '#555',
			style = this.querySelector ("svg").style
		style.fill = style.stroke = color

		if (this.hasAttribute ("size")) {
			let size = this.getAttribute ("size") 
			style.width = size
		}
	}

	connectedCallback ()
	{
		this._set_icon ()
	}

	attributeChangedCallback (name, oldValue, newValue)
	{
		if (oldValue != newValue) {
			switch (name) {
				case "name":
				case "color":
				case "size":
					this._set_icon ()
					break
			}
		}
	}
})

icons.svg

<svg xmlns="http://www.w3.org/2000/svg">
	<defs>
		<symbol id="hamburger">
			<rect b-icb-icon.json.jswidth="80" height="12" x="24" y="30"/>
			<rect x="24" y="55" width="80" height="12"/>
			<rect x="24" y="80" width="80" height="12"/>
		</symbol>
		<symbol id="home">
			<path d="M 97.15 63.18 C 98.38 61.78 98.26 59.63 96.88 58.38 L 66.49 30.92 C 65.11 29.67 62.9 29.7 61.55 30.98 L 31.06 59.85 C 29.71 61.12 29.64 63.27 30.91 64.64 L 31.67 65.45 C 32.94 66.82 34.99 66.98 36.25 65.82 L 38.53 63.71 L 38.53 94.57 C 38.53 96.46 40.01 98 41.85 98 L 53.73 98 C 55.56 98 57.05 96.46 57.05 94.57 L 57.05 72.98 L 72.21 72.98 L 72.21 94.57 C 72.18 96.46 73.5 98 75.32 98 L 87.93 98 C 89.75 98 91.24 96.46 91.24 94.57 L 91.24 64.14 C 91.24 64.14 91.87 64.72 92.65 65.42 C 93.42 66.12 95.05 65.56 96.28 64.16 Z"/>
		</symbol>
		<symbol id="shopping-cart">
			<path d="M 30 30 L 30 36.8 L 36.8 36.8 L 49.04 62.64 L 44.28 70.8 C 43.94 71.82 43.6 73.18 43.6 74.2 C 43.6 77.94 46.66 81 50.4 81 L 91.2 81 L 91.2 74.2 L 51.76 74.2 C 51.42 74.2 51.08 73.86 51.08 73.52 L 51.08 73.18 L 54.14 67.4 L 79.3 67.4 C 82.02 67.4 84.06 66.04 85.08 64 L 97.32 41.9 C 98 41.22 98 40.88 98 40.2 C 98 38.16 96.64 36.8 94.6 36.8 L 44.28 36.8 L 41.22 30 Z"/>
			<circle cx="54" cy="91" r="7"/>
			<circle cx="81" cy="91" r="7"/>
		</symbol>
		<symbol id="search">
			<path d="M 75.41 37.78 C 65.04 27.41 48.15 27.41 37.78 37.78 C 27.41 48.16 27.41 65.04 37.78 75.41 C 47.02 84.65 61.41 85.64 71.77 78.42 C 71.99 79.46 72.49 80.44 73.29 81.24 L 88.4 96.35 C 90.6 98.55 94.16 98.55 96.35 96.35 C 98.55 94.15 98.55 90.59 96.35 88.4 L 81.24 73.29 C 80.44 72.49 79.46 71.99 78.42 71.78 C 85.64 61.41 84.65 47.02 75.41 37.78 Z M 70.64 70.64 C 62.89 78.39 50.29 78.39 42.55 70.64 C 34.81 62.9 34.81 50.29 42.55 42.55 C 50.29 34.81 62.89 34.81 70.64 42.55 C 78.39 50.29 78.39 62.9 70.64 70.64 Z"/>
		</symbol>
		<symbol id="gear">
			<path d="M 89 55.65 L 88.67 55.54 L 87.41 52.46 L 87.55 52.14 C 91.37 43.28 91.11 43.02 90.47 42.38 L 85.37 37.29 C 85.16 37.08 84.79 36.93 84.48 36.93 C 84.19 36.93 83.32 36.93 75.78 40.42 L 75.48 40.56 L 72.37 39.28 L 72.24 38.96 C 68.7 30 68.34 30 67.45 30 L 60.24 30 C 59.37 30 58.96 30 55.68 38.98 L 55.55 39.3 L 52.46 40.59 L 52.16 40.47 C 47.06 38.27 44.08 37.16 43.3 37.16 C 42.99 37.16 42.62 37.3 42.41 37.51 L 37.3 42.61 C 36.65 43.26 36.38 43.54 40.41 52.21 L 40.56 52.53 L 39.29 55.61 L 38.98 55.73 C 30 59.27 30 59.62 30 60.54 L 30 67.75 C 30 68.68 30 69.06 39 72.36 L 39.32 72.47 L 40.59 75.54 L 40.45 75.85 C 36.63 84.72 36.87 84.96 37.52 85.62 L 42.62 90.71 C 42.83 90.92 43.2 91.07 43.52 91.07 C 43.8 91.07 44.67 91.07 52.21 87.58 L 52.52 87.44 L 55.63 88.72 L 55.75 89.04 C 59.3 98 59.66 98 60.55 98 L 67.76 98 C 68.66 98 69.04 98 72.33 89.02 L 72.45 88.69 L 75.55 87.41 L 75.85 87.53 C 80.94 89.74 83.92 90.85 84.69 90.85 C 85.01 90.85 85.38 90.71 85.59 90.49 L 90.71 85.38 C 91.35 84.73 91.62 84.46 87.59 75.79 L 87.44 75.47 L 88.7 72.4 L 89 72.28 C 98 68.72 98 68.37 98 67.45 L 98 60.24 C 98 59.32 98 58.94 89 55.65 Z M 64 75.7 C 57.56 75.7 52.32 70.45 52.32 64 C 52.32 57.56 57.56 52.31 64 52.31 C 70.44 52.31 75.68 57.56 75.68 64 C 75.68 70.45 70.44 75.7 64 75.7 Z"/>
		</symbol>
		<symbol id="heart">
			<path d="M 64 94.28 L 59.24 89.68 C 41.56 74.54 30 64.33 30 51.83 C 30 41.63 38.16 33.72 48.7 33.72 C 54.48 33.72 60.26 36.36 64 40.64 C 67.74 36.36 73.52 33.72 79.3 33.72 C 89.84 33.72 98 41.63 98 51.83 C 98 64.33 86.44 74.54 68.76 89.68 L 64 94.28 Z"/>
		</symbol>
		<symbol id="login">
			<path d="M 71.23 69.57 L 64 76.8 L 57.6 76.8 L 57.6 83.2 L 51.2 83.2 L 51.2 89.6 L 44.8 96 L 32 96 L 32 83.2 L 58.43 56.77 C 57.92 55.1 57.6 53.18 57.6 51.2 C 57.6 40.57 66.21 32 76.8 32 C 87.43 32 96 40.57 96 51.2 C 96 61.79 87.43 70.4 76.8 70.4 C 74.82 70.4 72.9 70.08 71.1 69.53 L 71.23 69.57 Z M 86.79 54.78 C 88.51 53.05 89.6 50.65 89.6 48 C 89.6 42.69 85.31 38.4 80 38.4 L 80 38.4 C 77.35 38.4 74.95 39.49 73.22 41.21 L 73.22 41.21 L 86.79 54.78 Z"/>
		</symbol>
		<symbol id="logout">
			<path d="M 83.13 72.5 L 83.13 64 L 61.88 64 L 61.88 55.5 L 83.13 55.5 L 83.13 47 L 95.88 59.75 Z M 78.88 68.25 L 78.88 85.25 L 57.63 85.25 L 57.63 98 L 32.13 85.25 L 32.13 30 L 78.88 30 L 78.88 51.25 L 74.63 51.25 L 74.63 34.25 L 40.63 34.25 L 57.63 42.75 L 57.63 81 L 74.63 81 L 74.63 68.25 Z"/>
		</symbol>
		<symbol id="share">
			<path d="M 84.48 78.1 C 81.88 78.1 79.54 79.1 77.77 80.73 L 53.45 66.54 C 53.63 65.77 53.75 64.97 53.75 64.15 C 53.75 63.34 53.63 62.53 53.45 61.76 L 77.51 47.72 C 79.33 49.42 81.78 50.48 84.48 50.48 C 90.13 50.48 94.72 45.89 94.72 40.24 C 94.72 34.59 90.13 30 84.48 30 C 78.83 30 74.23 34.59 74.23 40.24 C 74.23 41.06 74.35 41.86 74.54 42.63 L 50.48 56.68 C 48.65 54.97 46.21 53.91 43.51 53.91 C 37.86 53.91 33.27 58.51 33.27 64.15 C 33.27 69.81 37.86 74.4 43.51 74.4 C 46.21 74.4 48.65 73.34 50.48 71.63 L 74.8 85.82 C 74.63 86.53 74.53 87.28 74.53 88.05 C 74.53 93.54 78.98 98 84.48 98 C 89.98 98 94.43 93.54 94.43 88.05 C 94.43 82.56 89.98 78.1 84.48 78.1 Z"/>
		</symbol>
		<symbol id="email">
			<path d="M 91.2 36.8 L 36.8 36.8 C 33.04 36.8 30.03 39.84 30.03 43.6 L 30 84.4 C 30 88.16 33.04 91.2 36.8 91.2 L 91.2 91.2 C 94.96 91.2 98 88.16 98 84.4 L 98 43.6 C 98 39.84 94.96 36.8 91.2 36.8 Z M 91.2 84.4 L 36.8 84.4 L 36.8 50.4 L 64 67.4 L 91.2 50.4 L 91.2 84.4 Z M 64 60.6 L 36.8 43.6 L 91.2 43.6 L 64 60.6 Z"/>
		</symbol>
		<symbol id="telegram">
			<path d="M 66.23 80.01 C 66.23 80.01 60.9 84.98 57.46 88.19 C 56.85 88.76 55.97 88.98 55.16 88.77 C 54.34 88.55 53.72 87.94 53.45 87.16 C 51.3 80.92 47.19 68.63 47.19 68.63 C 47.19 68.63 38.39 65.87 31.68 63.9 C 30.71 63.61 30.03 62.75 30 61.75 C 29.97 60.77 30.59 59.87 31.54 59.52 C 46.49 54.06 83.08 40.49 94.96 36.14 C 95.73 35.86 96.59 36.01 97.21 36.53 C 97.84 37.06 98.12 37.87 97.95 38.66 C 95.71 49.05 89.74 78 87.28 89.43 C 87.04 90.51 86.27 91.39 85.22 91.79 C 84.18 92.18 83 92.02 82.09 91.38 C 76.35 87.34 66.23 80.01 66.23 80.01 Z M 52.2 66.56 L 56.96 82.07 L 58.02 72.24 C 58.02 72.24 76.4 55.86 86.87 46.52 C 87.18 46.25 87.22 45.79 86.97 45.47 C 86.72 45.14 86.25 45.07 85.9 45.28 C 73.76 52.95 52.2 66.56 52.2 66.56 Z"/>
		</symbol>
		<symbol id="twitter">
			<path d="M 102.2 52.9 C 105.16 50.81 107.3 46.1 107.3 46.1 C 107.3 46.1 101.95 47.07 98.8 47.8 C 96.37 45.32 94.43 42.7 89.57 42.7 C 77.43 42.7 75 50.15 75 62.57 C 62.86 62.57 52.99 54.28 46.1 44.4 C 44.86 46.92 43.41 52.25 43.43 55.13 C 43.43 60.77 47.46 65.28 51.2 68.2 C 48.97 68.12 42.7 64.8 42.7 64.8 C 42.7 72.69 49.91 80.3 56.3 81.8 C 54.24 82.46 49.89 82.28 47.8 81.8 C 49.57 88.28 57 91.86 63.1 92 C 58.24 96.96 55.57 100.42 41 100.42 C 47.19 105.04 54.99 107.3 62.86 107.3 C 92 107.3 100.5 88.6 100.5 59.7 C 103.9 58 107.3 54.6 109 51.2 C 109 51.2 104.97 52.51 102.2 52.9 Z"/>
		</symbol>
		<symbol id="facebook">
			<path d="M 70.38 55.5 L 83.13 55.5 L 83.13 68.25 L 70.38 68.25 L 70.38 98 L 57.63 98 L 57.63 68.25 L 44.88 68.25 L 44.88 55.5 L 57.63 55.5 L 57.63 50.15 C 57.63 45.13 59.2 38.71 62.39 35.23 C 65.54 31.74 69.49 30 74.21 30 L 83.13 30 L 83.13 42.75 L 74.21 42.75 C 72.08 42.75 70.38 44.45 70.38 46.58 L 70.38 55.5 Z"/>
		</symbol>
		<symbol id="instagram">
			<path d="M 64 45.3 C 53.66 45.3 45.3 53.66 45.3 64 C 45.3 74.34 53.66 82.7 64 82.7 C 74.34 82.7 82.7 74.34 82.7 64 C 82.7 53.66 74.34 45.3 64 45.3 Z M 64 73.35 C 58.85 73.35 54.65 69.15 54.65 64 C 54.65 58.85 58.85 54.65 64 54.65 C 69.15 54.65 73.35 58.85 73.35 64 C 73.35 69.15 69.15 73.35 64 73.35 Z"/>
			<path d="M 82.68 41.9 L 82.68 41.9 C 80.81 41.92 79.28 43.45 79.3 45.32 C 79.32 47.19 80.85 48.72 82.72 48.7 C 84.59 48.68 86.12 47.15 86.1 45.28 C 86.08 43.41 84.55 41.88 82.68 41.9 Z"/>
			<path d="M 77.14 30 L 50.25 30 C 39.03 30 30 39.1 30 49.99 L 30 77.87 C 30 88.77 39.37 98 50.57 98 L 50.59 98 L 78.57 98 L 78.59 98 C 88.29 98 98 88.45 98 77.57 L 98 77.55 L 98 49.67 L 98 49.65 C 98 38.76 88.34 30 77.14 30 Z M 91.2 77.58 C 91.2 84.54 85.22 90.23 78.04 90.27 L 50.25 90.23 C 43.09 90.27 36.8 84.79 36.8 77.84 L 36.8 49.96 C 36.8 43.01 43.11 36.8 50.28 36.8 L 77.18 36.8 C 84.33 36.8 91.2 42.73 91.2 49.7 L 91.2 77.58 Z"/>
		</symbol>
		<symbol id="whatsapp">
			<path d="M 79.58 70.75 C 78.72 70.32 74.57 68.29 73.8 68.01 C 73.02 67.73 72.46 67.59 71.89 68.44 C 71.33 69.27 69.71 71.17 69.22 71.73 C 68.72 72.28 68.23 72.32 67.39 71.94 C 66.54 71.52 63.81 70.62 60.58 67.73 C 58.06 65.48 56.37 62.72 55.87 61.87 C 55.38 61.02 55.82 60.55 56.24 60.13 C 56.63 59.74 57.1 59.15 57.52 58.64 C 57.93 58.13 58.07 57.79 58.36 57.24 C 58.64 56.64 58.5 56.18 58.29 55.75 C 58.08 55.33 56.39 51.16 55.68 49.5 C 55 47.85 54.3 48.06 53.77 48.06 C 53.29 48.02 52.72 48.02 52.16 48.02 C 51.59 48.02 50.67 48.23 49.9 49.03 C 49.12 49.88 46.94 51.92 46.94 56.05 C 46.94 60.17 49.97 64.16 50.39 64.76 C 50.81 65.31 56.36 73.81 64.84 77.47 C 66.86 78.32 68.44 78.83 69.67 79.25 C 71.69 79.89 73.54 79.8 75 79.59 C 76.62 79.33 80 77.55 80.71 75.55 C 81.43 73.55 81.43 71.9 81.22 71.51 C 81.01 71.13 80.45 70.92 79.6 70.54 Z M 64.17 91.62 L 64.13 91.62 C 59.11 91.62 54.14 90.26 49.8 87.71 L 48.78 87.11 L 38.16 89.87 L 41.01 79.54 L 40.33 78.48 C 37.53 74.02 36.04 68.87 36.04 63.58 C 36.04 48.15 48.66 35.57 64.2 35.57 C 71.72 35.57 78.78 38.5 84.1 43.82 C 89.41 49.08 92.34 56.14 92.34 63.62 C 92.33 79.04 79.7 91.63 64.19 91.63 Z M 88.14 39.77 C 81.68 33.53 73.18 30 64.13 30 C 45.48 30 30.29 45.11 30.29 63.7 C 30.29 69.64 31.84 75.43 34.81 80.54 L 30 98 L 47.95 93.32 C 52.9 95.99 58.46 97.41 64.13 97.42 L 64.14 97.42 C 82.8 97.42 97.99 82.3 98 63.71 C 98 54.72 94.49 46.25 88.1 39.88 Z"/>
		</symbol>
		<symbol id="youtube">
			<path d="M 83.17 66.17 L 47.16 84.22 C 46.8 84.4 46.41 84.5 46 84.5 C 44.63 84.5 43.51 83.43 43.51 82.12 L 43.5 45.87 C 43.5 45.48 43.6 45.1 43.79 44.76 C 44.43 43.6 45.94 43.16 47.16 43.77 L 83.18 61.96 C 84.95 62.85 84.95 65.27 83.17 66.17 Z"/>
		</symbol>
	</defs>
</svg>