element-ui-for-gov/packages/upload/src/svg.js

element-ui for gov

export default {
  props: {
    svgName: {
      type: String,
      default: 'other'
    }
  },
  methods: {
    renderSvg() {
      switch (this.svgName) {
        case 'picture':
          return <span role="img" aria-label="pic_lg" class="anticon anticon-pic_lg" style="color: rgb(0, 153, 232);"><svg viewBox="0 0 36 36" focusable="false" class="" data-icon="pic_lg" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M30.9 0c1.8 0 2.4.2 3.1.5s1.2.9 1.5 1.5c.3.7.5 1.3.5 3.1v25.7c0 1.8-.2 2.4-.5 3.1s-.9 1.2-1.5 1.5c-.7.3-1.3.5-3.1.5H5.1c-1.8 0-2.4-.2-3.1-.5S.8 34.5.5 33.9c-.3-.6-.5-1.2-.5-3V5.1C0 3.3.2 2.7.5 2 .9 1.4 1.4.9 2 .5 2.7.2 3.3 0 5.1 0h25.8zM14 16.6c-.7-.6-1.6-.5-2.2.3l-5.7 8.3-.1.1c-.2.4 0 .7.4.7h23c.4 0 .6-.4.3-.7l-5.4-7.5-.1-.1c-.3-.3-.8-.3-1.1 0l-4 4.7-5.2-5.7.1-.1zM23 9c-1.5 0-2.8 1.2-2.8 2.7s1.2 2.7 2.8 2.7c1.5 0 2.8-1.2 2.8-2.7S24.5 9 23 9z"></path></svg></span>;
        case 'doc':
          return <span role="img" aria-label="word_lg" class="anticon anticon-word_lg" style="color: rgb(57, 128, 252);"><svg viewBox="0 0 36 36" focusable="false" class="" data-icon="word_lg" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M30.9 0c1.8 0 2.4.2 3.1.5s1.2.9 1.5 1.5c.3.7.5 1.3.5 3.1v25.7c0 1.8-.2 2.4-.5 3.1s-.9 1.2-1.5 1.5c-.7.3-1.3.5-3.1.5H5.1c-1.8 0-2.4-.2-3.1-.5S.8 34.5.5 33.9c-.3-.6-.5-1.2-.5-3V5.1C0 3.3.2 2.7.5 2S1.4.9 2 .5 3.3 0 5.1 0h25.8zM13.2 10H10l3.8 16h2.1l2.1-9.6 2.1 9.6h2.1L26 10h-5.3v2.2h1.7l-1.6 8L19.1 10h-2.2l-1.7 10.2-2-10.2z"></path></svg></span>;
        case 'xlsx':
          return <span role="img" aria-label="excel_lg" class="anticon anticon-excel_lg" style="color: rgb(2, 157, 85);"><svg viewBox="0 0 36 36" focusable="false" class="" data-icon="excel_lg" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M30.9 0c1.8 0 2.4.2 3.1.5s1.2.9 1.5 1.5c.3.7.5 1.3.5 3.1v25.7c0 1.8-.2 2.4-.5 3.1s-.9 1.2-1.5 1.5c-.7.3-1.3.5-3.1.5H5.1c-1.8 0-2.4-.2-3.1-.5S.8 34.5.5 33.9c-.3-.6-.5-1.2-.5-3V5.1C0 3.3.2 2.7.5 2 .9 1.4 1.4.9 2 .5 2.7.2 3.3 0 5.1 0h25.8zM14.3 10H11l4.8 7.2L10 26h7.5v-2.2h-2.9l2.9-4.2 4.3 6.4H25l-5.9-8.8L24 10h-3.2l-3.2 4.8-3.3-4.8z"></path></svg></span>;
        case 'ppt':
          return <span role="img" aria-label="ppt_lg" class="anticon anticon-ppt_lg" style="color: rgb(242, 117, 29);"><svg viewBox="0 0 36 36" focusable="false" class="" data-icon="ppt_lg" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M30.9 0c1.8 0 2.4.2 3.1.5s1.2.9 1.5 1.5c.3.7.5 1.3.5 3.1v25.7c0 1.8-.2 2.4-.5 3.1s-.9 1.2-1.5 1.5c-.7.3-1.3.5-3.1.5H5.1c-1.8 0-2.4-.2-3.1-.5S.8 34.5.5 33.9c-.3-.6-.5-1.2-.5-3V5.1C0 3.3.2 2.7.5 2 .9 1.4 1.4.9 2 .5S3.3 0 5.1 0h25.8zM19.6 10H12v2.1h2.2V26h3.3v-5.3h2.2c3.3 0 5.4-2.1 5.4-5.3-.1-3.2-2.3-5.4-5.5-5.4zm0 2.2c1.1 0 2.7 1.1 2.7 3.2s-1.7 3.2-2.7 3.2h-2.2v-6.4h2.2z"></path></svg></span>;
        case 'pdf':
          return <span role="img" aria-label="pdf_lg" class="anticon anticon-pdf_lg" style="color: rgb(229, 77, 58);"><svg viewBox="0 0 36 36" focusable="false" class="" data-icon="pdf_lg" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M30.9 0c1.8 0 2.4.2 3.1.5s1.2.9 1.5 1.5c.3.7.5 1.3.5 3.1v25.7c0 1.8-.2 2.4-.5 3.1s-.9 1.2-1.5 1.5c-.7.3-1.3.5-3.1.5H5.1c-1.8 0-2.4-.2-3.1-.5S.8 34.5.5 33.9c-.3-.6-.5-1.2-.5-3V5.1C0 3.3.2 2.7.5 2 .9 1.4 1.4.9 2 .5S3.3 0 5.1 0h25.8zM16.8 7c-.8-.1-1.5.3-1.9 1-1.1 1.8.5 5.5 1.2 6.9-.9 2.6-1.9 5.1-3.2 7.6C7.3 24.9 7 26.4 7 27v.1c0 .7.4 1.3 1 1.7.3.1.6.2 1 .2 1.5 0 3.3-1.7 5.2-5.1 2.4-1 4.8-1.8 7.3-2.3 1.3 1.1 2.9 1.7 4.5 1.8 1 0 3.1 0 3.1-2.1.1-.8-.4-2.1-3.2-2.2-1.3 0-2.6.2-3.8.4-1.5-1.4-2.8-3.1-3.8-4.9 1-3.4 1.1-5.8.3-6.9-.5-.4-1.2-.7-1.8-.7zM11 25.4c-.5.8-1.2 1.4-2 1.7l-.2.1c.6-.8 1.3-1.4 2.2-1.8zm6.4-7.7c.7 1 1.5 2.1 2.4 3h-.2l.1.1c-1.3.3-2.8.7-4.2 1.2v-.1l-.1.1c.7-1.3 1.3-2.8 1.8-4.2l.1.1.1-.2zm8.3 3.3c1.2 0 1.5.3 1.5.5-.4.1-.8.2-1.2.1-.6-.1-1.2-.2-1.8-.5.5-.1.9-.1 1.5-.1zM17 8.8c.3 1 .3 2.1-.1 3.2-.4-1-.6-2.1-.4-3.1.1-.1.2-.1.2-.1h.3z"></path></svg></span>;
        case 'mp3':
          return <span role="img" aria-label="voice_lg" class="anticon anticon-voice_lg" style="color: rgb(243, 165, 40);"><svg viewBox="0 0 36 36" focusable="false" class="" data-icon="voice_lg" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M30.9 0c1.8 0 2.4.2 3.1.5s1.2.9 1.5 1.5c.3.7.5 1.3.5 3.1v25.7c0 1.8-.2 2.4-.5 3.1s-.9 1.2-1.5 1.5c-.7.3-1.3.5-3.1.5H5.1c-1.8 0-2.4-.2-3.1-.5S.8 34.5.5 33.9c-.3-.6-.5-1.2-.5-3V5.1C0 3.3.2 2.7.5 2 .9 1.4 1.4.9 2 .5 2.7.2 3.3 0 5.1 0h25.8zM18 9c-5 0-9 4.2-9 9.4v5.5c0 1.7 1.3 3.1 3 3.1h2.1c.5 0 .9-.4.9-.9v-4.2c0-.5-.4-.9-.9-.9H11v-2.6c0-4 3.1-7.3 7-7.3s7 3.3 7 7.3V21h-3.1c-.5 0-.9.4-.9.9v4.2c0 .5.4.9.9.9H24c1.7 0 3-1.4 3-3.1v-5.5c0-5.2-4-9.4-9-9.4z"></path></svg></span>;
        case 'mp4':
          return <span role="img" aria-label="video_lg" class="anticon anticon-video_lg" style="color: rgb(164, 98, 197);"><svg viewBox="0 0 36 36" focusable="false" class="" data-icon="video_lg" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M30.9 0c1.8 0 2.4.2 3.1.5s1.2.9 1.5 1.5c.3.7.5 1.3.5 3.1v25.7c0 1.8-.2 2.4-.5 3.1s-.9 1.2-1.5 1.5c-.7.3-1.3.5-3.1.5H5.1c-1.8 0-2.4-.2-3.1-.5S.8 34.5.5 33.9c-.3-.6-.5-1.2-.5-3V5.1C0 3.3.2 2.7.5 2 .9 1.4 1.4.9 2 .5S3.3 0 5.1 0h25.8zM20.5 13h-9c-.2 0-1.5.1-1.5 1.4v7.1c0 1.4 1.5 1.4 1.5 1.4h9s1.5 0 1.5-1.4v-7.1c0-1.3-1.3-1.4-1.5-1.4zm6.5 0l-4 2.8v4.4l4 2.8V13z"></path></svg></span>;
        case 'zip':
          return <span role="img" aria-label="zip_lg" class="anticon anticon-zip_lg" style="color: rgb(109, 129, 148);"><svg viewBox="0 0 36 36" focusable="false" class="" data-icon="zip_lg" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M30.9 0c1.8 0 2.4.2 3.1.5s1.2.9 1.5 1.5c.3.7.5 1.3.5 3.1v25.7c0 1.8-.2 2.4-.5 3.1s-.9 1.2-1.5 1.5c-.7.3-1.3.5-3.1.5H5.1c-1.8 0-2.4-.2-3.1-.5S.8 34.5.5 33.9s-.5-1.2-.5-3V5.1C0 3.3.2 2.7.5 2 .9 1.4 1.4.9 2 .5 2.7.2 3.3 0 5.1 0h25.8zM22 26h-4v4h4v-4zm-4-4h-4v4h4v-4zm4-4h-4v4h4v-4zm-4-4h-4v4h4v-4zm4-4h-4v4h4v-4zm-4-4h-4v4h4V6z"></path></svg></span>;
        default:
          return <span role="img" aria-label="file_lg" class="anticon anticon-file_lg" style="color: rgb(57, 128, 252);"><svg viewBox="0 0 36 36" focusable="false" class="" data-icon="file_lg" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M30.9 0c1.8 0 2.4.2 3.1.5s1.2.9 1.5 1.5c.3.7.5 1.3.5 3.1v25.7c0 1.8-.2 2.4-.5 3.1s-.9 1.2-1.5 1.5c-.7.3-1.3.5-3.1.5H5.1c-1.8 0-2.4-.2-3.1-.5S.8 34.5.5 33.9c-.3-.6-.5-1.2-.5-3V5.1C0 3.3.2 2.7.5 2S1.4.9 2 .5 3.3 0 5.1 0h25.8zM20 9h-8a2 2 0 00-2 2v14c0 1.1.9 2 2 2h12a2 2 0 002-2V14l-6-5zm2 11c.6 0 1 .4 1 1s-.4 1-1 1h-7.1c-.5-.1-.9-.5-.9-1 0-.6.4-1 1-1h7zm-1-4c.6 0 1 .4 1 1s-.4 1-1 1h-6.1c-.5-.1-.9-.5-.9-1 0-.6.4-1 1-1h6z"></path></svg></span>;
      }
    }
  },
  render() {
    return (
      this.renderSvg()
    );
  }
};