@fe6/icon-vue/es/runtime/index.js

Water Icon 的 VUE3 图标

import { createVNode as _createVNode } from "vue";
import { inject, provide, defineComponent } from 'vue';
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,
    id: id
  };
};
var IconContext = Symbol('cube-icon-context');
export var IconProvider = function IconProvider(config) {
  provide(IconContext, config);
};
export var IconWrapper = function IconWrapper(name, rtl, render) {
  var options = defineComponent({
    name: 'icon-' + name,
    props: ['size', 'strokeWidth', 'strokeLinecap', 'strokeLinejoin', 'theme', 'colors', 'spin'],
    setup: function setup(props) {
      var id = guid();
      var ICON_CONFIGS = inject(IconContext, DEFAULT_ICON_CONFIGS) || DEFAULT_ICON_CONFIGS;
      return function () {
        var size = props.size,
            strokeWidth = props.strokeWidth,
            strokeLinecap = props.strokeLinecap,
            strokeLinejoin = props.strokeLinejoin,
            theme = props.theme,
            colors = props.colors,
            spin = props.spin;
        var svgProps = IconConverter(id, {
          size: size,
          strokeWidth: strokeWidth,
          strokeLinecap: strokeLinecap,
          strokeLinejoin: strokeLinejoin,
          theme: theme,
          colors: colors
        }, ICON_CONFIGS);
        var cls = ["".concat(ICON_CONFIGS.prefix, "-icon")];
        cls.push("".concat(ICON_CONFIGS.prefix, "-icon-").concat(name));

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

        if (spin) {
          cls.push("".concat(ICON_CONFIGS.prefix, "-icon-spin"));
        }

        return _createVNode("span", {
          "class": cls.join(' ')
        }, [render(svgProps)]);
      };
    }
  });
  return options;
};