shu-c-view/packages/svg-icon/index.js

rollup 打包vue组件库框架

/**
 * @desc 显示iconfont的svg多色图
 */
import _isArray from 'lodash/isArray';
import _isEmpty from 'lodash/isEmpty';
import { devConsole } from '../helper/util.js';

const BaseSvgIcon = {
  name: 'BaseSvgIcon',
  props: {
    size: {
      type: String,
      default: '1em'
    },
    iconname: {
      type: String,
      default: ''
    },
    // 自定义样式
    cls: {
      type: String,
      default: ''
    }
  },
  computed: {},
  data() {
    return {};
  },
  methods: {},
  render(h) {
    return h(
      'div',
      {
        class: {
          'base-svg-content': true,
          [this.cls]: this.cls
        },
        on: {
          click: () => {
            this.$emit('click', this.iconname);
          }
        }
      },
      [
        h(
          'svg',
          {
            class: 'navIcon',
            attrs: {
              'aria-hidden': true
            },
            style: {
              width: this.size,
              height: this.size,
              'vertical-align': '-0.15em',
              display: 'inline'
            }
          },
          [h('use', { attrs: { 'xlink:href': `#${this.iconname}` } }, [])]
        )
      ]
    );
  }
};
BaseSvgIcon.install = function(Vue, ElComponents) {
  // 用于按需加载的时候独立使用
  devConsole('按需加载独立组件：' + BaseSvgIcon.name);
  if (_isArray(ElComponents) && !_isEmpty(ElComponents)) {
    for (let i = 0; i < ElComponents.length; i++) {
      if (ElComponents[i].name !== BaseSvgIcon.name) {
        Vue.use(ElComponents[i]);
      }
    }
  }
  Vue.component(BaseSvgIcon.name, BaseSvgIcon);
};
export { BaseSvgIcon };