Move CSS mask-image from inline data: to files (#11258)

Co-authored-by: Daniel Beck <daniel-beck@users.noreply.github.com>
Co-authored-by: Tim Jacomb <21194782+timja@users.noreply.github.com>

Author: daniel-beck

src/main/scss/components/_breadcrumbs.scss

@@ -134,7 +134,7 @@
     opacity: 0;
     transition: var(--standard-transition);
     background: var(--text-color);
-    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Down%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E");
+    mask-image: url("../images/svgs/mask-breadcrumbs__after.svg");
     mask-position: center;
     mask-repeat: no-repeat;
   }

src/main/scss/components/_dropdowns.scss

@@ -194,7 +194,7 @@ $dropdown-padding: 0.375rem;
       bottom: 0;
       background: var(--text-color-secondary);
       width: 1rem;
-      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Forward%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M184 112l144 144-144 144'/%3E%3C/svg%3E");
+      mask-image: url("../images/svgs/mask-dropdowns__chevron.svg");
       mask-size: contain;
       mask-repeat: no-repeat;
       mask-position: center;

src/main/scss/form/_checkbox.scss

@@ -153,7 +153,7 @@
     width: 22px;
     height: 22px;
     background: var(--background);
-    mask-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='UTF-8'?%3e%3csvg width='384px' height='320px' viewBox='0 0 384 320' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3ePath%3c/title%3e%3cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e%3cpath d='M327.917546,10.9278525 C339.555371,-2.37251966 359.771775,-3.72027991 373.072147,7.91754577 C386.239516,19.4389932 387.692129,39.368305 376.427694,52.671077 L376.082454,53.0721475 L152.082454,309.072147 C140.014868,322.863675 118.889432,323.700972 105.767743,311.015951 L105.372583,310.627417 L9.372583,214.627417 C-3.12419433,202.13064 -3.12419433,181.86936 9.372583,169.372583 C21.7443926,157.000773 41.7261905,156.877055 54.2501999,169.001429 L54.627417,169.372583 L126.441,241.186 L327.917546,10.9278525 Z' id='Path' fill='%23FF0000' fill-rule='nonzero'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");
+    mask-image: url("../images/svgs/mask-checkbox-label.svg");
     mask-size: 10px 10px;
     mask-repeat: no-repeat;
     mask-position: center;

src/main/scss/form/_codemirror.scss

@@ -184,7 +184,7 @@
   z-index: 10;
   cursor: ns-resize;
   background: currentColor;
-  mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='20px' height='20px' viewBox='0 0 20 20' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cline x1='19' y1='12' x2='12' y2='19' id='Path' stroke='%23979797' stroke-width='2'%3E%3C/line%3E%3Cline x1='1' y1='18' x2='17.9705627' y2='1.02943725' id='Path-2' stroke='%23979797' stroke-width='2'%3E%3C/line%3E%3C/g%3E%3C/svg%3E");
+  mask-image: url("../images/svgs/mask-codemirror.svg");
   mask-size: 7px 7px;
   mask-position: 3px 3px;
   mask-repeat: no-repeat;

src/main/scss/form/_file-upload.scss

@@ -14,7 +14,7 @@
     width: 1rem;
     height: 36px;
     background: currentColor;
-    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M320 367.79h76c55 0 100-29.21 100-83.6s-53-81.47-96-83.6c-8.89-85.06-71-136.8-144-136.8-69 0-113.44 45.79-128 91.2-60 5.7-112 43.88-112 106.4s54 106.4 120 106.4h56' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='40'/%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='40' d='M320 255.79l-64-64-64 64M256 448.21V207.79'/%3E%3C/svg%3E");
+    mask-image: url("../images/svgs/mask-file-upload.svg");
     mask-position: center;
     mask-repeat: no-repeat;
     pointer-events: none;

src/main/scss/form/_layout.scss

@@ -122,7 +122,7 @@
     min-height: 20px;
     background: var(--text-color);
     color: transparent;
-    mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='262px' height='482px' viewBox='0 0 262 482' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M69.9217381,109.622622 L69.9347383,109.509526 L69.9838606,109.158807 L70.0463523,108.766768 C70.2927563,107.286617 70.7336,105.509397 71.3554148,103.600821 C73.4488365,97.1753443 76.974163,91.0239622 81.9750299,85.3670497 C84.5508811,82.453282 87.4853512,79.7201177 90.8001215,77.1662697 C100.73686,69.5111158 114.003751,65.6584363 131.476234,65.4354882 C133.731084,65.4096204 135.996257,65.4453704 138.232058,65.5407008 L139.478148,65.6000218 C140.992957,65.679511 142.536904,65.7906863 144.04662,65.9294921 L145.210323,66.0424992 C145.886163,66.1116384 146.60564,66.1925244 147.313561,66.2795642 L148.414194,66.420922 L149.377674,66.5545415 L150.375686,66.7050246 L151.398071,66.8714663 L152.049055,66.9841252 L152.731845,67.1083183 L153.642724,67.2845248 L154.549432,67.4714994 C155.036905,67.5756456 155.574038,67.6978797 156.090422,67.8232778 L156.917997,68.0311744 C158.666031,68.484436 160.136789,68.9816723 161.141416,69.4394425 C170.146558,73.5618171 177.044937,78.1235016 182.224862,83.4639805 C188.857993,90.3027083 191.999176,97.8308192 191.999176,107.499034 C191.999176,119.466025 188.796962,127.918279 181.370643,136.250976 C181.093904,136.561492 180.816698,136.867422 180.538309,137.169526 L180.089688,137.652102 L179.736214,138.026258 L179.002023,138.784568 L178.579132,139.213445 L178.134441,139.655368 L177.707007,140.071619 L177.021999,140.726828 L176.298991,141.400731 L175.788688,141.867317 L175.318979,142.286805 L174.54297,142.970055 L173.990783,143.446079 L173.448394,143.905722 L172.625948,144.588916 L171.799887,145.262466 L170.811596,146.050172 L169.864089,146.789794 L169.222049,147.28309 L168.549302,147.793886 L167.493519,148.583956 L166.782836,149.108414 L165.65246,149.931951 L164.484527,150.770371 L163.266904,151.632649 L161.555386,152.827104 L160.682666,153.429152 L159.298283,154.375903 L157.864408,155.346877 L155.333592,157.040637 L153.750968,158.088827 L151.524574,159.551762 L148.580787,161.468911 L144.800696,163.908618 C105.775292,188.991858 87.997951,218.376069 87.997951,257.047472 L87.997951,283.286279 L88.0016284,283.748414 C88.3121212,301.66652 103.883328,316 122.998363,316 C142.328557,316 157.998775,301.353568 157.998775,283.286279 L157.998775,257.047472 L158.001383,256.432449 C158.064604,248.820487 159.375708,243.378146 162.208358,238.456376 C165.925109,231.998468 172.860638,225.357973 183.865352,218.206756 L186.747913,216.348707 L189.667785,214.457346 L192.470459,212.628123 L195.158954,210.857753 L197.739048,209.141153 L199.612339,207.881962 L201.424999,206.651521 L203.184757,205.444126 L204.893987,204.257626 L206.014818,203.471391 L207.63679,202.320739 L208.708154,201.551674 L209.751591,200.795045 L210.776652,200.043916 L211.783987,199.29767 L212.774236,198.555696 L213.748026,197.81739 L214.705977,197.082156 L215.983535,196.08689 L217.035512,195.253661 L217.94273,194.524595 L218.836751,193.796023 L219.718133,193.067399 L220.587422,192.33819 L221.445157,191.607874 L222.291869,190.87594 L223.128081,190.141889 L224.349696,189.048475 L225.176062,188.294328 L225.979581,187.549096 L227.15568,186.436436 L227.953672,185.666523 L228.73078,184.904536 L229.501513,184.136777 L230.633743,182.986693 L231.403964,182.189294 L232.15663,181.397931 L232.905389,180.598844 L233.650817,179.791592 L234.393505,178.975725 L235.134055,178.150785 C253.063009,158.033696 262,134.778085 262,107.499034 C262,81.4013251 252.315995,58.3143983 234.08637,39.5197386 C222.737894,27.8195118 209.350637,18.7642961 192.813373,11.0878005 L191.857565,10.6472715 C176.144833,3.48753386 154.016249,-0.255558118 130.568693,0.0135609187 C97.385459,0.43694412 69.212387,9.00946009 46.2762841,26.6791815 C39.5211589,31.8836333 33.4271839,37.5663685 28.0119541,43.6920026 C17.038175,56.105392 9.16079603,69.8997291 4.39056696,84.5413054 C2.80350137,89.4125897 1.62984552,94.1870463 0.865737279,98.781619 L0.782196688,99.2931802 L0.614828552,100.383438 L0.559658337,100.765066 L0.426811303,101.749189 L0.318522027,102.638537 L0.226704214,103.487005 L0.123646908,104.617718 L0.0652556787,105.43714 L0.0342145373,105.994277 C-0.81250758,124.122996 14.1596716,139.394013 33.4714881,140.181654 L33.9656162,140.198367 L34.5332314,140.20872 C53.0445487,140.409453 68.5022596,127.170521 69.8964399,109.989591 L69.9217381,109.622622 Z' fill='currentColor' fill-rule='nonzero'%3E%3C/path%3E%3Ccircle fill='currentColor' cx='123' cy='434' r='48'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
+    mask-image: url("../images/svgs/mask-layout__help-button.svg");
     mask-size: 45% 45%;
     mask-position: center;
     mask-repeat: no-repeat;

src/main/scss/form/_reorderable-list.scss

@@ -162,7 +162,7 @@ div.to-be-removed {
         position: absolute;
         inset: 0 4px;
         background-color: var(--text-color);
-        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3EReorder Three%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M96 256h320M96 176h320M96 336h320'/%3E%3C/svg%3E");
+        mask-image: url("../images/svgs/mask-reorderable-list__handle.svg");
         mask-position: center;
         mask-repeat: no-repeat;
         mask-size: contain;

src/main/scss/form/_search-bar.scss

@@ -25,7 +25,7 @@
       aspect-ratio: 1;
       margin-right: 0.2rem;
       background: var(--text-color-secondary);
-      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm75.31 260.69a16 16 0 11-22.62 22.62L256 278.63l-52.69 52.68a16 16 0 01-22.62-22.62L233.37 256l-52.68-52.69a16 16 0 0122.62-22.62L256 233.37l52.69-52.68a16 16 0 0122.62 22.62L278.63 256z'/%3E%3C/svg%3E");
+      mask-image: url("../images/svgs/mask-search-bar__webkit-search-cancel-button.svg");
       mask-size: contain;
       mask-repeat: no-repeat;
       opacity: 0;

src/main/scss/form/_select.scss

@@ -10,7 +10,7 @@
     bottom: 0;
     width: 0.625rem;
     background-color: currentColor;
-    mask-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='UTF-8'?%3e%3csvg width='336px' height='192px' viewBox='0 0 336 192' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3ePath%3c/title%3e%3cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e%3cg id='arrow' transform='translate(0.000000, 0.000000)' fill='%23FF0000' fill-rule='nonzero'%3e%3cpath d='M7.02943725,7.02943725 C16.3053957,-2.24652118 31.2852799,-2.34214962 40.6788451,6.74255194 L40.9705627,7.02943725 L168,134.059 L295.029437,7.02943725 C304.305396,-2.24652118 319.28528,-2.34214962 328.678845,6.74255194 L328.970563,7.02943725 C338.246521,16.3053957 338.34215,31.2852799 329.257448,40.6788451 L328.970563,40.9705627 L184.970563,184.970563 C175.694604,194.246521 160.71472,194.34215 151.321155,185.257448 L151.029437,184.970563 L7.02943725,40.9705627 C-2.34314575,31.5979797 -2.34314575,16.4020203 7.02943725,7.02943725 Z' id='Path'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
+    mask-image: url("../images/svgs/mask-select.svg");
     mask-size: contain;
     mask-repeat: no-repeat;
     mask-position: center;

src/main/scss/form/_toggle-switch.scss

@@ -63,7 +63,7 @@
     & + label {
       &::after {
         left: 25px;
-        mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='66px' height='66px' viewBox='0 0 66 66' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M66,0 L66,66 L0,66 L0,0 L66,0 Z M37.7154094,29.2061836 C37.3690459,28.9031155 36.8425777,28.9382134 36.5395097,29.2845769 L36.5395097,29.2845769 L31.2924962,35.2799905 L29.4225874,33.410737 L29.3440813,33.3414133 C29.0171724,33.0872262 28.5444804,33.1103341 28.2440774,33.410737 C27.9186409,33.7361736 27.9186409,34.2638104 28.2440774,34.589247 L28.2440774,34.589247 L30.7440745,37.0892441 L30.8202748,37.15679 C31.1634387,37.4256962 31.6657159,37.3856111 31.9604761,37.0487424 L31.9604761,37.0487424 L37.7938027,30.3820833 L37.8577508,30.2991398 C38.0896293,29.9560466 38.0351295,29.4859387 37.7154094,29.2061836 Z' fill='%23000000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+        mask-image: url("../images/svgs/mask-toggle-switch__checked.svg");
       }
 
       &:active,