Add fontello

.gitignore

@@ -1,3 +1,8 @@
+#Own
+src/res/fontello/css
+src/res/fontello/fonts
+
+#Github gitignore template
 # Logs
 logs
 *.log

package.json

@@ -4,27 +4,30 @@
 	"scripts": {
 		"build": "webpack",
 		"watch": "webpack --watch",
-		"server": "live-server dist/"
+		"server": "live-server dist/",
+		"install-fontello":"fontello-cli install --config ./src/res/fontello/config.json --css src/res/fontello/css/ --font src/res/fontello/font",
+		"postinstall": "yarn install-fontello"
 	},
 	"main": "index.js",
 	"license": "MIT",
 	"devDependencies": {
 		"@typescript-eslint/eslint-plugin": "^4.0.1",
 		"@typescript-eslint/parser": "^4.0.1",
-		"css-loader": "^4.2.2",
+		"css-loader": "^4.3.0",
 		"eslint": "^7.8.1",
 		"eslint-config-prettier": "^6.11.0",
+		"extract-loader": "^5.1.0",
 		"file-loader": "^6.1.0",
+		"fontello-cli": "^0.5.0",
 		"html-loader": "^1.3.0",
 		"html-webpack-plugin": "^4.4.1",
 		"live-server": "^1.2.1",
 		"posthtml-extend": "^0.5.0",
 		"posthtml-loader": "^2.0.1",
 		"prettier": "^2.1.1",
-		"raw-loader": "^4.0.1",
+		"resolve-url-loader": "^3.1.1",
 		"sass": "^1.26.10",
 		"sass-loader": "^10.0.2",
-		"style-loader": "^1.2.1",
 		"ts-loader": "^8.0.3",
 		"typescript": "^4.0.2",
 		"webpack": "^4.44.1",

src/base.scss

@@ -1,4 +1,5 @@
 @use "./color_scheme";
+@use "./res/fontello/css/fontello";
 
 html {
 	border: 0px;

src/index.ts

@@ -33,11 +33,11 @@ class Carousel extends HTMLElement {
 
 	connectedCallback() {
 		this.shadow.innerHTML = html`
-			<button class="next">${"<"}</button>
+			<button class="next icon-left-open"></button>
 			<div class="container">
 				<img src="${this.items.next().value.img}" />
 			</div>
-			<button class="prev">${">"}</button>
+			<button class="prev icon-right-open"></button>
 			<style>
 				${Carousel.css}
 			</style>
@@ -144,14 +144,55 @@ class Carousel extends HTMLElement {
 			}
 
 			button {
-				border: 1px solid var(--background-opposite-2);
+				border: none;
 				border-radius: 50%;
-				background-color: var(--background-primary-2);
+				height: 2.2em;
+				width: 2.2em;
+				background-color: var(--background-opposite-4);
 				cursor: pointer;
 				z-index: 1;
-				color: var(--text-color-3);
+				color: var(--background-primary-3);
+				padding: 0;
 				margin: -20%;
 			}
+
+[class^="icon-"]:before, [class*=" icon-"]:before {
+  font-family: "fontello";
+  font-style: normal;
+  font-weight: normal;
+  speak: never;
+ 
+  display: inline-block;
+  text-decoration: inherit;
+  width: 1em;
+  margin-right: .2em;
+  text-align: center;
+  /* opacity: .8; */
+ 
+  /* For safety - reset parent styles, that can break glyph codes*/
+  font-variant: normal;
+  text-transform: none;
+ 
+  /* fix buttons height, for twitter bootstrap */
+  line-height: 1em;
+ 
+  /* Animation center compensation - margins should be symmetric */
+  /* remove if not needed */
+  margin-left: .2em;
+ 
+  /* you can be more comfortable with increased icons size */
+  /* font-size: 120%; */
+ 
+  /* Font smoothing. That was taken from TWBS */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+ 
+  /* Uncomment for 3D effect */
+  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+}
+ 
+.icon-left-open:before { content: '\\e800'; } /* '' */
+.icon-right-open:before { content: '\\e801'; } /* '' */
 		`;
 	}
 }

src/res/fontello/config.json

@@ -0,0 +1,22 @@
+{
+  "name": "",
+  "css_prefix_text": "icon-",
+  "css_use_suffix": false,
+  "hinting": true,
+  "units_per_em": 1000,
+  "ascent": 850,
+  "glyphs": [
+    {
+      "uid": "d870630ff8f81e6de3958ecaeac532f2",
+      "css": "left-open",
+      "code": 59392,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "399ef63b1e23ab1b761dfbb5591fa4da",
+      "css": "right-open",
+      "code": 59393,
+      "src": "fontawesome"
+    }
+  ]
+}

src/res/fontello/font/fontello.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Copyright (C) 2020 by original authors @ fontello.com</metadata>
+<defs>
+<font id="fontello" horiz-adv-x="1000" >
+<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
+<missing-glyph horiz-adv-x="1000" />
+<glyph glyph-name="left-open" unicode="&#xe800;" d="M654 682l-297-296 297-297q10-10 10-25t-10-25l-93-93q-11-10-25-10t-25 10l-414 415q-11 10-11 25t11 25l414 414q10 11 25 11t25-11l93-93q10-10 10-25t-10-25z" horiz-adv-x="714.3" />
+
+<glyph glyph-name="right-open" unicode="&#xe801;" d="M618 361l-414-415q-11-10-25-10t-25 10l-93 93q-11 11-11 25t11 25l296 297-296 296q-11 11-11 25t11 25l93 93q10 11 25 11t25-11l414-414q10-11 10-25t-10-25z" horiz-adv-x="714.3" />
+</font>
+</defs>
+</svg>

webpack.config.js

@@ -23,11 +23,30 @@ module.exports = {
 				use: [
 					{
 						loader: "file-loader",
-						options: { name: "[name].css" },
+						options: {
+							name: "[name].css",
 						},
+					},
+					"extract-loader",
+					"css-loader",
+					"resolve-url-loader",
 					"sass-loader",
 				],
 			},
+			{
+				test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+				use: [
+					{
+						loader: "file-loader",
+						options: {
+							name: "[name].[ext]",
+							outputPath: "fontello/",
+							esModule: false,
+						},
+					},
+				],
+			},
+
 			{
 				test: /\.html$/,
 				use: [
@@ -37,7 +56,9 @@ module.exports = {
 						options: {
 							plugins: [
 								/* PostHTML Plugins */
-								require("posthtml-extend")({ root: src }),
+								require("posthtml-extend")({
+									root: src,
+								}),
 							],
 						},
 					},