@fe6/icon-img/lib/runtime/index.js

Water Icon 的纯 HTML 图标

export var DEFAULT_ICON_CONFIGS = {
  size: '1em',
  spin: false,
  strokeWidth: 4,
  strokeLinecap: 'round',
  strokeLinejoin: 'round',
  rtl: false,
  theme: 'outline',
  colors: {
    outline: {
      outStrokeColor: '#333',
      outFillColor: 'transparent'
    },
    filled: {
      outStrokeColor: '#333',
      outFillColor: '#fff'
    },
    twoTone: {
      outStrokeColor: '#333',
      outFillColor: '#2f88ff'
    },
    multiColor: {
      outStrokeColor: '#333',
      outFillColor: '#2f88ff',
      innerStrokeColor: '#fff',
      innerFillColor: '#43ccf8'
    }
  },
  prefix: 'cube'
};

var guid = function guid() {
  return 'icon-' + ((1 + Math.random()) * 0x100000000 | 0).toString(16).substring(1);
};

export var IconConverter = function IconConverter(id, icon, config) {
  var fill = (icon === null || icon === void 0 ? void 0 : icon.colors) || [];
  var colors = [];
  var theme = (icon === null || icon === void 0 ? void 0 : icon.theme) || config.theme;

  switch (theme) {
    case 'outline':
      colors.push(typeof fill[0] === 'string' ? fill[0] : config.colors.outline.outStrokeColor);
      colors.push(typeof fill[1] === 'string' ? fill[1] : config.colors.outline.outFillColor);
      colors.push(typeof fill[0] === 'string' ? fill[0] : config.colors.outline.outStrokeColor);
      colors.push(typeof fill[1] === 'string' ? fill[1] : config.colors.outline.outFillColor);
      break;

    case 'filled':
      colors.push(typeof fill[0] === 'string' ? fill[0] : config.colors.filled.outStrokeColor);
      colors.push(typeof fill[0] === 'string' ? fill[0] : config.colors.filled.outStrokeColor);
      colors.push(typeof fill[1] === 'string' ? fill[1] : config.colors.filled.outFillColor);
      colors.push(typeof fill[1] === 'string' ? fill[1] : config.colors.filled.outFillColor);
      break;

    case 'twoTone':
      colors.push(typeof fill[0] === 'string' ? fill[0] : config.colors.twoTone.outStrokeColor);
      colors.push(typeof fill[1] === 'string' ? fill[1] : config.colors.twoTone.outFillColor);
      colors.push(typeof fill[0] === 'string' ? fill[0] : config.colors.twoTone.outStrokeColor);
      colors.push(typeof fill[1] === 'string' ? fill[1] : config.colors.twoTone.outFillColor);
      break;

    case 'multiColor':
      colors.push(typeof fill[0] === 'string' ? fill[0] : config.colors.multiColor.outStrokeColor);
      colors.push(typeof fill[1] === 'string' ? fill[1] : config.colors.multiColor.outFillColor);
      colors.push(typeof fill[2] === 'string' ? fill[2] : config.colors.multiColor.innerStrokeColor);
      colors.push(typeof fill[3] === 'string' ? fill[3] : config.colors.multiColor.innerFillColor);
      break;
  }

  return {
    size: (icon === null || icon === void 0 ? void 0 : icon.size) || config.size,
    strokeWidth: (icon === null || icon === void 0 ? void 0 : icon.strokeWidth) || config.strokeWidth,
    strokeLinecap: (icon === null || icon === void 0 ? void 0 : icon.strokeLinecap) || config.strokeLinecap,
    strokeLinejoin: (icon === null || icon === void 0 ? void 0 : icon.strokeLinejoin) || config.strokeLinejoin,
    colors: colors,
    svg: (icon === null || icon === void 0 ? void 0 : icon.svg) || '',
    id: id
  };
};
var commonbase64EncodeChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
var urlBase64EncodeChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_';
export var base64encode = function base64encode(str, isUrl) {
  var out = '';
  var idx = 0;
  var len = str.length;
  var code1, code2, code3;
  var base64EncodeChars = isUrl ? urlBase64EncodeChars : commonbase64EncodeChars;

  while (idx < len) {
    code1 = str.charCodeAt(idx++) & 0xff;

    if (idx === len) {
      out += base64EncodeChars.charAt(code1 >> 2);
      out += base64EncodeChars.charAt((code1 & 0x3) << 4);
      out += '==';
      break;
    }

    code2 = str.charCodeAt(idx++);

    if (idx === len) {
      out += base64EncodeChars.charAt(code1 >> 2);
      out += base64EncodeChars.charAt((code1 & 0x3) << 4 | (code2 & 0xf0) >> 4);
      out += base64EncodeChars.charAt((code2 & 0xf) << 2);
      out += '=';
      break;
    }

    code3 = str.charCodeAt(idx++);
    out += base64EncodeChars.charAt(code1 >> 2);
    out += base64EncodeChars.charAt((code1 & 0x3) << 4 | (code2 & 0xf0) >> 4);
    out += base64EncodeChars.charAt((code2 & 0xf) << 2 | (code3 & 0xc0) >> 6);
    out += base64EncodeChars.charAt(code3 & 0x3f);
  }

  ;
  return out;
};
export var unicodeToUtf8 = function unicodeToUtf8(str) {
  var out = '';
  var idx;
  var code;
  var len = str.length;

  for (idx = 0; idx < len; idx++) {
    code = str.charCodeAt(idx);

    if (code >= 0x0001 && code <= 0x007f) {
      out += str.charAt(idx);
    } else if (code > 0x07ff) {
      out += String.fromCharCode(0xe0 | code >> 12 & 0x0f);
      out += String.fromCharCode(0x80 | code >> 6 & 0x3f);
      out += String.fromCharCode(0x80 | code >> 0 & 0x3f);
    } else {
      out += String.fromCharCode(0xc0 | code >> 6 & 0x1f);
      out += String.fromCharCode(0x80 | code >> 0 & 0x3f);
    }
  }

  return out;
};
var currentConfig = DEFAULT_ICON_CONFIGS;
export var setConfig = function setConfig(config) {
  currentConfig = Object.assign(currentConfig, config);
};
export var getConfig = function getConfig() {
  return currentConfig;
};
export var IconWrapper = function IconWrapper(name, rtl, render) {
  return function (props) {
    var config = getConfig();
    var cls = ["".concat(config.prefix, "-icon")];
    cls.push("".concat(config.prefix, "-icon-").concat(name));

    if (rtl && config.rtl) {
      cls.push("".concat(config.prefix, "-icon-rtl"));
    }

    if (props !== null && props !== void 0 && props.spin) {
      cls.push("".concat(config.prefix, "-icon-spin"));
    }

    var svgProps = IconConverter(guid(), props, config);
    var svgHtml = render(svgProps);
    var src = base64encode(unicodeToUtf8(svgHtml));
    var svgBase64 = "data:image/svg+xml;base64,".concat(src);
    return props !== null && props !== void 0 && props.base64 ? svgBase64 : "<span class=\"".concat(cls.join(' '), "\">\n        <img class=\"").concat(config.prefix, "-icon-img\" src=\"").concat(svgBase64, "\" />\n      </span>");
  };
};