Icons cannot be displayed when used with element-ui

[HermitSun]

Reproduction repo: https://github.com/HermitSun/element-ts-import-issue

---

I had to import an extra el-icon component, or an extra CSS file element-ui/lib/theme-chalk/icon.css, otherwise icons cannot be displayed. I used it with a project created by vue-cli. I think maybe the CSS file of element-ui's icons are not included.

My dependencies' versions:

• element-ui: 2.13.2
• camel-2-dash: 0.1.0
• ts-import-plugin: 1.6.6
• webpack-merge: 5.0.9

My vue.config.js:

const path = require("path");
const merge = require("webpack-merge");
const tsImportPluginFactory = require("ts-import-plugin");
const join = path.join;
const basename = path.basename;
const camel2Dash = require("camel-2-dash");

module.exports = {
  chainWebpack: config => {
    config.module
      .rule("ts")
      .use("ts-loader")
      .tap(options => {
        options = merge.merge(options, {
          transpileOnly: true,
          getCustomTransformers: () => ({
            before: [
              tsImportPluginFactory({
                libraryName: "element-ui",
                libraryDirectory: "lib",
                camel2DashComponentName: true,
                style: path =>
                  join(
                    "element-ui",
                    "lib",
                    "theme-chalk",
                    `${camel2Dash(basename(path, ".js"))}.css`
                  )
              })
            ]
          }),
          compilerOptions: {
            module: "es2015"
          }
        });
        return options;
      });
  }
};

How I used it (but not work as expect):

import Vue from 'vue';
import { DatePicker } from 'element-ui';

export default Vue.extend({
  name: 'App',
  components: {
    [DatePicker.name]: DatePicker
  },
  data() {
    return {
      value1: ''
    }
  },
});

The code can work as expect:

import Vue from 'vue';
import { DatePicker } from 'element-ui';
import 'element-ui/lib/theme-chalk/icon.css'; // <- just add this line

export default Vue.extend({
  name: 'App',
  components: {
    [DatePicker.name]: DatePicker
  },
  data() {
    return {
      value1: ''
    }
  },
});