text: import { icons } from "../../../assets/icons";
  
  const HEX_REGEX = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
  const RGB_REGEX = /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/;
  const SF_SIZES = ["xxs", "xs", "sm", "md", "lg", "xl", "xxl", "xl3", "xl4"];
  const SF_ICONS = Object.keys(icons);
  
  export default {
    name: "SfIcon",
    props: {
      /**
       * Icon SVG path(s)
       * It can be single SVG path (string) or array of SVG paths or icon name
       * from our icons list (such as 'added_to_cart`)
       */
      path: {
        type: [String, Array],
        default: ""
      },
      /**
       * Custom size of the icon
       * It can be our standard sizes, or `12px` or `1.2rem` or nothing.
       * Standard sizes: `xxs`, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`, `xl3`, `xl4`.
       */
      size: {
        type: String,
        default: ""
      },
      /**
       * Custom color of the icon
       * It can be according to our standard colors, or `#fff` or `rgb(255,255,255)` or nothing.
       * Standard colors: `primary`, `secondary`, `white`, `black`, `accent`, `green-primary`, `green-secondary`, `gray-primary`, `gray-secondary`, `light-primary`, `light-secondary`, `pink-primary`, `pink-secondary`, `yellow-primary`, `yellow-secondary`, `blue-primary`, `blue-secondary`.
       */
      color: {
        type: String,
        default: ""
      },
      /**
       * Custom viewBox size of the icon
       * It should be according to the standard `"min-x min-y width height"`.
       * By default it will be `0 0 24 24`. If you use our icons, you don't need to pass this prop at all.
       * Recommedations: try to get your SVG designed with our default viewBox value and reduce the number of props passed to the component.
       */
      viewBox: {
        type: String,
        default: "0 0 24 24"
      }
    },
    computed: {
      isDecimalOrHexColor() {
        const color = this.color.trim();
        return RGB_REGEX.test(color) || HEX_REGEX.test(color);
      },
      isSFSizes() {
        const size = this.size.trim();
        return SF_SIZES.includes(size);
      },
      iconColor() {
        return !this.isDecimalOrHexColor
          ? `sf-icon--color-${this.color.trim()}`
          : this.color;
      },
      iconSize() {
        return this.isSFSizes ? `sf-icon--size-${this.size.trim()}` : "";
      },
      isSFIcons() {
        return SF_ICONS.includes(this.path.trim());
      },
      iconViewBox() {
        return this.isSFIcons
          ? icons[this.path].viewBox || this.viewBox
          : this.viewBox;
      },
      iconPaths() {
        if (this.isSFIcons) {
          return icons[this.path].paths;
        } else {
          return Array.isArray(this.path) ? this.path : [this.path];
        }
      }
    },
    mounted() {
      if (this.isDecimalOrHexColor) {
        this.$refs.icon.style.setProperty("--icon-color", this.color);
      }
  
      if (!this.isSFSizes) {
        this.$refs.icon.style.setProperty("--icon-size", this.size);
      }
    }
  };
  