feat(colouring): leverage mask-image

BREAKING CHANGE:
lucagoslar · Feb 9, 2023 · 81ea8ee · 81ea8ee
1 parent 4c68e53
commit 81ea8ee
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -21,7 +21,7 @@ npm i phosphor-css
 
 ## Usage
 
-By default, icons are the size of 1.5rem (24px). `width`, `height` and `line-height` can be modified when targetting the `ph` class.
+By default, icons are the size of 1.5rem (24px). `width`, `height`, `background-color` (final icon colour) and `line-height` can be modified when targetting `.ph.icon`.
 
 ```css
 @import 'phosphor-css/css/index.css';
@@ -33,12 +33,12 @@ By default, icons are the size of 1.5rem (24px). `width`, `height` and `line-hei
 
 ```html
 <!-- regular -->
-<i class="ph heart" />
+<i class="ph icon heart" />
 ```
 
 ```html
 <!-- bold -->
-<i class="ph heart bold" />
+<i class="ph icon heart bold" />
 ```
 
 ## License

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "phosphor-css",
-	"version": "1.0.2",
+	"version": "2.0.0",
 	"description": "🧩 CSS integration of a flexible icon family for the web.",
 	"files": [
 		"assets",

diff --git a/src/index.ts b/src/index.ts
@@ -104,7 +104,7 @@ for (const icon of icons) {
 
 	fs.appendFileSync(
 		'less/index.less',
-		'.ph.' + iconName + ' { .icon(' + iconName + '); }\n'
+		'.ph.icon.' + iconName + ' { .icon(' + iconName + '); }\n'
 	);
 }
 
@@ -120,7 +120,7 @@ for (const icon of icons) {
 
 	fs.appendFileSync(
 		'less/regular.less',
-		'.ph { .regularWeightIcon(' + iconName + '); }\n'
+		'.ph.icon { .regularWeightIcon(' + iconName + '); }\n'
 	);
 }
 
@@ -144,7 +144,7 @@ for (const weight of weights) {
 
 		fs.appendFileSync(
 			'less/' + weight + '.less',
-			'.ph { .icon(' + iconName + '); }\n'
+			'.ph.icon { .icon(' + iconName + '); }\n'
 		);
 	}
 }
diff --git a/src/templates/less/base.less b/src/templates/less/base.less
@@ -1,11 +1,13 @@
 @phosphor-icons: '../assets';
 
-.ph {
+.ph.icon {
 	position: relative;
 	display: inline-block;
 
-	background-size: contain;
-	background-repeat: no-repeat;
+	mask-size: contain;
+	mask-repeat: no-repeat;
+
+	background-color: #000;
 
 	width: 1.5rem;
 	height: 1.5rem;

diff --git a/src/templates/less/index.less b/src/templates/less/index.less
@@ -3,10 +3,12 @@
 @weights: bold, duotone, fill, light, thin;
 
 .icon(@type) {
-	background-image: url('@{phosphor-icons}/regular/@{type}.svg');
+	mask-image: url('@{phosphor-icons}/regular/@{type}.svg');
+	-webkit-mask-image: url('@{phosphor-icons}/regular/@{type}.svg');
 	each(@weights, {
     &.@{value} {
-      background-image: url("@{phosphor-icons}/@{value}/@{type}-@{value}.svg");
+      mask-image: url("@{phosphor-icons}/@{value}/@{type}-@{value}.svg");
+      -webkit-mask-image: url("@{phosphor-icons}/@{value}/@{type}-@{value}.svg");
     }
   });
 }
diff --git a/src/templates/less/single__weight.less b/src/templates/less/single__weight.less
@@ -2,12 +2,14 @@
 
 .regularWeightIcon(@type) {
 	&.@{type} {
-		background-image: url('@{phosphor-icons}/regular/@{type}.svg');
+		mask-image: url('@{phosphor-icons}/regular/@{type}.svg');
+		-webkit-mask-image: url('@{phosphor-icons}/regular/@{type}.svg');
 	}
 }
 
 .icon(@type) {
 	&.@{type}.@{weight} {
-		background-image: url('@{phosphor-icons}/@{weight}/@{type}-@{weight}.svg');
+		mask-image: url('@{phosphor-icons}/@{weight}/@{type}-@{weight}.svg');
+		-webkit-mask-image: url('@{phosphor-icons}/@{weight}/@{type}-@{weight}.svg');
 	}
 }
diff --git a/src/templates/scss/base.scss b/src/templates/scss/base.scss
@@ -1,11 +1,13 @@
 $phosphor-icons: '../assets';
 
-.ph {
+.ph.icon {
 	position: relative;
 	display: inline-block;
 
-	background-size: contain;
-	background-repeat: no-repeat;
+	mask-size: contain;
+	mask-repeat: no-repeat;
+
+	background-color: #000;
 
 	width: 1.5rem;
 	height: 1.5rem;

diff --git a/src/templates/scss/index.scss b/src/templates/scss/index.scss
@@ -3,11 +3,13 @@
 $weights: bold, duotone, fill, light, thin;
 
 @mixin icon($type) {
-	.ph.#{$type} {
-		background-image: url('#{$phosphor-icons}/regular/#{$type}.svg');
+	.ph.icon.#{$type} {
+		mask-image: url('#{$phosphor-icons}/regular/#{$type}.svg');
+		-webkit-mask-image: url('#{$phosphor-icons}/regular/#{$type}.svg');
 		@each $weight in $weights {
 			&.#{$weight} {
-				background-image: url('#{$phosphor-icons}/#{$weight}/#{$type}-#{$weight}.svg');
+				mask-image: url('#{$phosphor-icons}/#{$weight}/#{$type}-#{$weight}.svg');
+				-webkit-mask-image: url('#{$phosphor-icons}/#{$weight}/#{$type}-#{$weight}.svg');
 			}
 		}
 	}

diff --git a/src/templates/scss/single__weight.scss b/src/templates/scss/single__weight.scss
@@ -1,13 +1,15 @@
 @import 'base';
 
 @mixin regularWeightIcon($type) {
-	.ph.#{$type} {
-		background-image: url('#{$phosphor-icons}/regular/#{$type}.svg');
+	.ph.icon.#{$type} {
+		mask-image: url('#{$phosphor-icons}/regular/#{$type}.svg');
+		-webkit-mask-image: url('#{$phosphor-icons}/regular/#{$type}.svg');
 	}
 }
 
 @mixin icon($type) {
-	.ph.#{$type}.#{$weight} {
-		background-image: url('#{$phosphor-icons}/#{$weight}/#{$type}-#{$weight}.svg');
+	.ph.icon.#{$type}.#{$weight} {
+		mask-image: url('#{$phosphor-icons}/#{$weight}/#{$type}-#{$weight}.svg');
+		-webkit-mask-image: url('#{$phosphor-icons}/#{$weight}/#{$type}-#{$weight}.svg');
 	}
 }