Rework Legacy PNG Icons with Font Awesome SVG

Existing implementation handle icon with PNG, with manual positioning with CSS background image. This PR rework icons with Font Awesome SVG: - Locally venor Font Awesome v5.15.4 `expand-solid.svg` and `compress-solid.svg` - Rework styling with SCSS - Fix accessibility (see Leaflet#110) - Test with Leaflet v1.7.1 - Update demo with above changes Fix Leaflet#98 Fix Leaflet#102 Fix Leaflet#103 Fix Leaflet#110 Fix Leaflet#114 Signed-off-by: Wong Hoi Sing Edison <[email protected]>
runette · Nov 30, 2021 · 27056dc · 27056dc
1 parent 91c9745
commit 27056dc
Show file tree

Hide file tree

Showing 16 changed files with 116 additions and 231 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 node_modules
+package-lock.json
diff --git a/Makefile b/Makefile
@@ -1,14 +1,16 @@
 # See the README for installation instructions.
 UGLIFY = node_modules/.bin/uglifyjs
+SASS = node_modules/.bin/sass
 
-all: \
-	$(shell npm install) \
-	dist/Leaflet.fullscreen.min.js \
+.PHONY: all
+all: dist/Leaflet.fullscreen.min.js dist/Leaflet.fullscreen.min.css
 
+.PHONY: clean
 clean:
-	rm -f dist/Leaflet.fullscreen.min.js
+	rm -f dist/Leaflet.fullscreen.min.js dist/Leaflet.fullscreen.min.css
 
-dist/Leaflet.fullscreen.min.js: dist/Leaflet.fullscreen.js
-	$(UGLIFY) dist/Leaflet.fullscreen.js > dist/Leaflet.fullscreen.min.js
+dist/Leaflet.fullscreen.min.js:
+	$(UGLIFY) src/Leaflet.fullscreen.js > dist/Leaflet.fullscreen.min.js
 
-.PHONY: clean
+dist/Leaflet.fullscreen.min.css:
+	$(SASS) src/Leaflet.fullscreen.scss dist/Leaflet.fullscreen.min.css
diff --git a/README.md b/README.md
@@ -59,11 +59,17 @@ Leaflet.fullscreen is [available through the Mapbox Plugin CDN](https://www.mapb
 
 ### Building
 
-    npm install && make
-
-__ProTip__ You may want to install `watch` so you can run `watch make`
-without needing to execute make on every change.
+    npm install
+    npm run test
+    npm run uglifyjs
+    npm run sass
 
 ### Supported Leaflet Versions
 
 Leaflet 1.0 and later is supported. Earlier versions may work, but are not tested.
+
+### License
+
+ISC
+
+SVG icons from [Font Awesome v5.15.4](https://github.com/FortAwesome/Font-Awesome/releases/tag/5.15.4): [Creative Commons Attribution 4.0](https://fontawesome.com/license/free)
diff --git a/compress-solid.svg b/compress-solid.svg
diff --git a/dist/Leaflet.fullscreen.min.css b/dist/Leaflet.fullscreen.min.css
diff --git a/dist/Leaflet.fullscreen.min.css.map b/dist/Leaflet.fullscreen.min.css.map
diff --git a/dist/Leaflet.fullscreen.min.js b/dist/Leaflet.fullscreen.min.js
diff --git a/dist/fullscreen.png b/dist/fullscreen.png
diff --git a/dist/[email protected] b/dist/[email protected]
diff --git a/dist/leaflet.fullscreen.css b/dist/leaflet.fullscreen.css
diff --git a/expand-solid.svg b/expand-solid.svg
diff --git a/fullscreen.svg b/fullscreen.svg