feat: CRMMON-8463 add play utility icon (#142)

Signed-off-by: Firas El Sayed <firas.elsayed@montreal.ca>
VilledeMontreal · Feb 26, 2025 · 0f369d9 · 0f369d9
1 parent 8135d40
commit 0f369d9
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [5.6.1] - 2025-02-26
+
+### Added
+- Styles - iconographie: Ajout de l'icône play.
+
 ## [5.6.0] - 2024-12-03
 
 ### Added

diff --git a/source/vdm-icon-system/icons/utility/_icons-utility.scss b/source/vdm-icon-system/icons/utility/_icons-utility.scss
@@ -91,6 +91,7 @@ $data-icon-park: "data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xml
 $data-icon-partner-bell: "data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' role='icon'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.892 13.073a3.393 3.393 0 00-.637-1.4c-.635-.838-1.663-1.368-3.055-1.368-2.164 0-3.495 1.47-3.889 3.019-.354-1.092-1.3-1.83-2.301-2.14.753-.55 1.147-1.335 1.147-2.231 0-.832-.346-1.59-.926-2.082C6.381 6.148 5.221 6 3.793 6H1v12.058h.794c.535-.001 1.074-.002 1.603 0 .706.004 1.395 0 2.037-.026 2.033-.082 3.425-1.105 3.87-2.642.153.683.448 1.24.832 1.663.783.862 1.918 1.199 3.061 1.199 1.408 0 2.425-.409 3.12-1.034l-.995-1.17c-.5.378-1.144.6-1.867.6-1.417-.004-2.042-.9-2.098-1.763h5.535v3.173h2.073V6.06h-2.073v7.013zM3.707 7.629H3.13v3.175h.68c.376 0 .642-.02.827-.058C5.74 10.52 5.94 9.696 5.94 9.17c0-.62-.297-1.117-.922-1.36-.317-.122-.756-.182-1.312-.182zm.933 8.722c.257 0 .575-.01.834-.057 1.182-.213 1.684-.998 1.684-1.93 0-.9-.545-1.579-1.492-1.827-.277-.072-.759-.12-1.185-.12H3.13v3.934H4.64zm8.544-4.476c-.957 0-1.606.632-1.789 1.51h3.55c-.166-.944-.803-1.51-1.761-1.51zM20.35 6.06h2.038v11.998H20.35V6.06z'/%3E %3C/svg%3E"; 
 $data-icon-partner-hydroquebec: "data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' role='icon'%3E %3Cpath d='M12.989 16.286a6.842 6.842 0 111.292-1.29c.344.257 1.897 1.41 2.063 1.613a1140.2 1140.2 0 01-.256-2.383l5.73 4.288.014.125-4.235-1.863.348 3.224-4.957-3.713zm-1.625-1.284c-.789-.59-3.873-2.833-3.873-2.833h3.013c.173.135 1.521 1.14 2.178 1.63l-.001.002c.622-.82.99-1.847.99-2.96 0-2.694-2.162-4.877-4.828-4.877-2.667 0-4.83 2.183-4.83 4.877s2.163 4.877 4.83 4.877c.924 0 1.786-.262 2.52-.716h.001z'/%3E %3C/svg%3E"; 
 $data-icon-phone: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' role='icon'%3E %3Cpath fill-rule='evenodd' d='M14.62 13.974a3.013 3.013 0 013.173-.677c.842.313 1.716.53 2.607.648a1 1 0 01-.26 1.983 13.938 13.938 0 01-3.047-.758 1.012 1.012 0 00-1.064.223l-1.277 1.275a1 1 0 01-1.2.162 17.074 17.074 0 01-6.41-6.396 1 1 0 01.163-1.203l1.273-1.27c.277-.28.366-.695.227-1.064-.367-.982-.622-2.001-.758-3.03-.07-.5-.503-.872-1.02-.867H4.01a1.013 1.013 0 00-1.007 1.082 18.846 18.846 0 002.936 8.27 18.6 18.6 0 005.733 5.72 18.91 18.91 0 008.225 2.924 1.008 1.008 0 001.102-1.011v-2.011a1 1 0 112 0v2.006a3.005 3.005 0 01-.976 2.23 3.023 3.023 0 01-2.324.776 20.916 20.916 0 01-9.106-3.23 20.58 20.58 0 01-6.336-6.322 20.85 20.85 0 01-3.245-9.156 3.005 3.005 0 01.776-2.299A3.014 3.014 0 014.009 1h3.007a3.012 3.012 0 013.013 2.596c.117.889.335 1.761.648 2.599.414 1.1.15 2.339-.682 3.178l-.723.72a15.074 15.074 0 004.619 4.61l.729-.728z'/%3E %3C/svg%3E"; 
+$data-icon-play: "data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' role='icon'%3E %3Cpath d='M5 3l14 9-14 9V3z' stroke='%23ADB2BD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"; 
 $data-icon-plus-circle-full: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' role='icon'%3E %3Cpath fill-rule='evenodd' d='M11 11H8a1 1 0 000 2h3v3a1 1 0 002 0v-3h3a1 1 0 000-2h-3V8a1 1 0 00-2 0v3zm1 12C5.925 23 1 18.075 1 12S5.925 1 12 1s11 4.925 11 11-4.925 11-11 11z'/%3E %3C/svg%3E"; 
 $data-icon-plus-circle: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' role='icon'%3E %3Cpath fill-rule='evenodd' d='M11 11V8a1 1 0 012 0v3h3a1 1 0 010 2h-3v3a1 1 0 01-2 0v-3H8a1 1 0 010-2h3zm10.542 6.477a1 1 0 01-1.734-.997A8.953 8.953 0 0021 12a9 9 0 10-9 9 8.953 8.953 0 004.484-1.195 1 1 0 01.998 1.733A10.953 10.953 0 0112 23C5.925 23 1 18.075 1 12S5.925 1 12 1s11 4.925 11 11c0 1.948-.508 3.824-1.458 5.477z'/%3E %3C/svg%3E"; 
 $data-icon-plus: "data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' role='icon'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 4a1 1 0 00-1 1v6H5a1 1 0 100 2h6v6a1 1 0 102 0v-6h6a1 1 0 100-2h-6V5a1 1 0 00-1-1z'/%3E %3C/svg%3E"; 
@@ -1363,6 +1364,19 @@ $data-icon-x: "data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns=
       	background-color: $neutral-tertiary;
 	}
 }
+.icon-play {
+	&:before {
+		-webkit-mask: url($data-icon-play) no-repeat 50% 50%;
+		mask: url($data-icon-play) no-repeat 50% 50%;
+		width: 24px;
+		height: 24px;
+      	content: '';
+      	display: inline-block;
+      	-webkit-mask-size: cover;
+      	mask-size: cover;
+      	background-color: $neutral-tertiary;
+	}
+}
 .icon-plus-circle-full {
 	&:before {
 		-webkit-mask: url($data-icon-plus-circle-full) no-repeat 50% 50%;

diff --git a/source/vdm-icon-system/icons/utility/icon-utility.json b/source/vdm-icon-system/icons/utility/icon-utility.json
diff --git a/source/vdm-icon-system/icons/utility/svgs-inline-use/play.svg b/source/vdm-icon-system/icons/utility/svgs-inline-use/play.svg
diff --git a/source/vdm-icon-system/src/icon-utility/play.svg b/source/vdm-icon-system/src/icon-utility/play.svg