fix(FEC-12614): Add 'fill-rule' prop to the generic icon component (#734

) solves: FEC-12614 related pr: kaltura/playkit-js-playlist#33
kaltura · Mar 6, 2023 · ea37c8b · ea37c8b
1 parent 5d204d3
commit ea37c8b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/src/components/icon/icon.js b/src/components/icon/icon.js
@@ -94,10 +94,10 @@ class Icon extends Component {
    * @memberof Icon
    */
   createDynamicIconClass = (props: Object) => {
-    const {path, state, color, activeColor, width, height, viewBox} = props;
+    const {path, state, color, activeColor, width, height, viewBox, fillRule} = props;
     const fillColor = this.getFillColor(state, color, activeColor);
     const pathTag = this.getPathTag(path, fillColor);
-    const svgUrl = this.getSVGUrl(pathTag, width, height, viewBox);
+    const svgUrl = this.getSVGUrl(pathTag, width, height, viewBox, fillRule);
     const css = `.${this._className} { background-image: ${svgUrl}; }`;
     const style = document.getElementById(packageName);
     style && style.appendChild(document.createTextNode(css));
@@ -110,11 +110,12 @@ class Icon extends Component {
    * @param {number} width - svg width
    * @param {number} height - svg height
    * @param {string} viewBox - svg viewBox
+   * @param {string} fillRule - svg fill-rule
    * @returns {string} - encoded svg url
    * @memberof Icon
    */
-  getSVGUrl = (path: string, width: number = 36, height: number = 36, viewBox: string = '0 0 1024 1024'): string => {
-    const svg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="${viewBox}" width="${width}" height="${height}">${path}</svg>`;
+  getSVGUrl = (path: string, width: number = 36, height: number = 36, viewBox: string = '0 0 1024 1024', fillRule: string = 'nonzero'): string => {
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="${viewBox}" width="${width}" height="${height}" fill-rule="${fillRule}">${path}</svg>`;
     const replaces = [
       ['"', "'"],
       ['%', '%25'],

diff --git a/src/components/icon/icon.scss b/src/components/icon/icon.scss
@@ -1,5 +1,5 @@
-@function svg-url($svg, $size, $viewBox) {
-  $svg: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="#{$viewBox}" width="#{$size}" height="#{$size}">#{$svg}</svg>';
+@function svg-url($svg, $size, $viewBox, $fillRule) {
+  $svg: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="#{$viewBox}" width="#{$size}" height="#{$size}" fill-rule="#{$fillRule}">#{$svg}</svg>';
 
   $encoded: '';
   $slice: 2000;
@@ -33,7 +33,7 @@
   );
 }
 
-@function icon($icon-name, $color: '#000', $size: '36', $viewBox: '0 0 1024 1024') {
+@function icon($icon-name, $color: '#000', $size: '36', $viewBox: '0 0 1024 1024', $fillRule: 'nonzero') {
   $icons: (
     maximize:
       '<path fill="#{$color}" d="M800 269.255v114.745c0 17.673 14.327 32 32 32s32-14.327 32-32v-192c0-17.673-14.327-32-32-32h-192c-17.673 0-32 14.327-32 32s14.327 32 32 32h114.745l-137.373 137.373c-12.497 12.497-12.497 32.758 0 45.255s32.758 12.497 45.255 0l137.373-137.373z" /> <path fill="#{$color}" d="M224 754.745v-114.745c0-17.673-14.327-32-32-32s-32 14.327-32 32v192c0 17.673 14.327 32 32 32h192c17.673 0 32-14.327 32-32s-14.327-32-32-32h-114.745l137.373-137.373c12.497-12.497 12.497-32.758 0-45.255s-32.758-12.497-45.255 0l-137.373 137.373z" />',
@@ -117,7 +117,7 @@
       '<path fill="#{$color}" d="M30.133 6.838l-1.143 0.863c0.007 0.065 0.011 0.131 0.011 0.198v16.201c0 1.049-0.895 1.9-1.997 1.9h-22.006c-0.080 0-0.159-0.005-0.236-0.013l-1.128 0.851c-0.463 0.349-1.121 0.257-1.471-0.206s-0.257-1.121 0.206-1.471l26.5-20c0.463-0.349 1.121-0.257 1.471 0.206s0.257 1.121-0.206 1.471zM27 9.202l-4.619 3.486c0.222 0.109 0.421 0.233 0.596 0.373 0.291 0.232 0.514 0.479 0.668 0.742s0.231 0.508 0.231 0.735c0 0.232-0.086 0.429-0.259 0.59s-0.382 0.242-0.629 0.242c-0.161 0-0.295-0.041-0.401-0.124s-0.226-0.217-0.359-0.401c-0.237-0.36-0.484-0.63-0.742-0.81-0.164-0.114-0.357-0.193-0.578-0.234l-2.249 1.697c-0.045 0.237-0.068 0.495-0.068 0.774 0 0.365 0.045 0.7 0.135 1.005s0.22 0.566 0.391 0.781c0.171 0.215 0.377 0.379 0.618 0.49s0.507 0.167 0.796 0.167c0.388 0 0.721-0.090 0.998-0.27s0.522-0.455 0.735-0.824c0.118-0.218 0.246-0.388 0.384-0.511s0.305-0.185 0.504-0.185c0.237 0 0.433 0.090 0.59 0.27s0.234 0.372 0.234 0.575c0 0.241-0.072 0.5-0.217 0.774s-0.365 0.536-0.661 0.785-0.669 0.449-1.119 0.6c-0.45 0.152-0.957 0.227-1.52 0.227-1.198 0-2.133-0.349-2.806-1.048-0.536-0.557-0.858-1.265-0.967-2.123l-1.382 1.043c-0.033 0.165-0.096 0.337-0.19 0.516-0.145 0.275-0.365 0.536-0.661 0.785s-0.669 0.449-1.119 0.6c-0.246 0.083-0.508 0.143-0.788 0.18l-5.283 3.987c5.615-0.003 19.737-0.003 19.737-0.003v-14.893z"></path> <path fill="#{$color}" d="M4.997 6h19.546l-2.492 1.903c-6.487 0.002-17.051 0.002-17.051 0.002v13.019l-2 1.527v-14.551c0-1.049 0.895-1.9 1.997-1.9z"></path> <path fill="#{$color}" d="M12.841 14.034c0.179 0.125 0.353 0.293 0.521 0.504l1.399-1.068c-0.121-0.141-0.264-0.277-0.428-0.409-0.291-0.232-0.646-0.421-1.066-0.568s-0.88-0.22-1.382-0.22c-0.81 0-1.506 0.167-2.088 0.501s-1.028 0.806-1.335 1.417-0.462 1.314-0.462 2.11c0 0.77 0.144 1.437 0.433 2.002l1.598-1.22c-0.056-0.252-0.085-0.522-0.085-0.81 0-0.777 0.175-1.389 0.526-1.836s0.812-0.671 1.385-0.671c0.398 0 0.726 0.090 0.984 0.27z"></path>'
   );
   $icon: map-get($icons, $icon-name);
-  $svg-encoded-icon: svg-url($icon, $size, $viewBox);
+  $svg-encoded-icon: svg-url($icon, $size, $viewBox, $fillRule);
   @return $svg-encoded-icon;
 }