refactor(ui): Config & task icons (#1450)

BREAKING CHANGE:

- `file-icon` for the configurations is removed
- Configuration objects `icon` option changed and is now working differently: you can either use a material icon code or a custom image (see Public static files in the UI Plugin docs).
- Task objects have a new `icon` option wich works exactly the same
- By default, if no icon is provided for either the config or the task, the corresponding vue-cli plugin logo will be used instead (if any).

Author: Akryum

docs/plugin-dev-ui.md

@@ -114,16 +114,18 @@ api.describeConfig({
 
 #### Config icon
 
-Specify an icon with either a file type (like `'json'`) or a file name (like `.babelrc` to get the babel icon). This is powered by file-icons.
+It can be either a [Material icon](https://material.io/tools/icons) code or a custom image (see [Public static files](#public-static-files)):
 
 ```js
 api.describeConfig({
   /* ... */
-  // Icon generated using file-icons
-  icon: '.eslintrc.json'
+  // Config icon
+  icon: 'application_settings'
 })
 ```
 
+If you don't specify an icon, the plugin logo will be displayed if any (see [Logo](#logo)).
+
 #### Config file
 
 By default, a configuration UI might read and write to a configuration file, for example `.eslintrc.js`.
@@ -253,6 +255,20 @@ api.describeTask({
 })
 ```
 
+#### Task icon
+
+It can be either a [Material icon](https://material.io/tools/icons) code or a custom image (see [Public static files](#public-static-files)):
+
+```js
+api.describeTask({
+  /* ... */
+  // Task icon
+  icon: 'application_settings'
+})
+```
+
+If you don't specify an icon, the plugin logo will be displayed if any (see [Logo](#logo)).
+
 #### Tasks parameters
 
 You can add prompts to modify the command arguments. They will be displayed in a 'Parameters' modal.
@@ -912,4 +928,12 @@ You may need to expose some static files over the cli-ui builtin HTTP server (ty
 
 Any file in an optional `ui-public` folder in the root of the plugin package folder will be exposed to the `/_plugin/:id/*` HTTP route.
 
-For example, if you put a `my-logo.png` file into the `my-package/ui-public/` folder, it will be available with the `http://localhost:8000/_plugin/my-package/my-logo.png` URL when the cli-ui loads the plugin.
+For example, if you put a `my-logo.png` file into the `my-package/ui-public/` folder, it will be available with the `/_plugin/my-package/my-logo.png` URL when the cli-ui loads the plugin.
+
+```js
+api.describeConfig({
+  /* ... */
+  // Custom image
+  icon: '/_plugin/my-package/my-logo.png'
+})
+```

packages/@vue/cli-plugin-eslint/ui.js

@@ -5,7 +5,6 @@ module.exports = api => {
     name: 'ESLint configuration',
     description: 'eslint.config.eslint.description',
     link: 'https://github.com/vuejs/eslint-plugin-vue',
-    icon: '.eslintrc.json',
     files: {
       json: ['.eslintrc', '.eslintrc.json'],
       js: ['.eslintrc.js'],
@@ -181,7 +180,6 @@ module.exports = api => {
     name: 'ESLint extra',
     description: 'eslint.config.eslint-extra.description',
     link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint#configuration',
-    icon: '.eslintrc.json',
     files: {
       js: ['vue.config.js']
     },

packages/@vue/cli-plugin-pwa/ui.js

@@ -32,7 +32,6 @@ module.exports = api => {
     name: 'PWA',
     description: 'pwa.config.pwa.description',
     link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa#configuration',
-    icon: 'mobile.xm',
     files: {
       js: ['vue.config.js']
     },

packages/@vue/cli-service/ui-public/webpack-inspect-logo.png

@@ -48,6 +48,7 @@ module.exports = api => {
     match: /vue-cli-service serve/,
     description: 'vue-webpack.tasks.serve.description',
     link: 'https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#serve',
+    icon: '/_plugin/%40vue%2Fcli-service/webpack-logo.png',
     prompts: [
       {
         name: 'open',
@@ -120,6 +121,7 @@ module.exports = api => {
     match: /vue-cli-service build/,
     description: 'vue-webpack.tasks.build.description',
     link: 'https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#build',
+    icon: '/_plugin/%40vue%2Fcli-service/webpack-logo.png',
     prompts: [
       {
         name: 'mode',
@@ -210,6 +212,7 @@ module.exports = api => {
     command: 'vue-cli-service inspect',
     description: 'vue-webpack.tasks.inspect.description',
     link: 'https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md#inspecting-the-projects-webpack-config',
+    icon: '/_plugin/%40vue%2Fcli-service/webpack-inspect-logo.png',
     prompts: [
       {
         name: 'mode',

packages/@vue/cli-service/ui-public/webpack-logo.png

@@ -54,7 +54,6 @@
     "cross-env": "^5.1.5",
     "eslint": "^4.16.0",
     "eslint-plugin-graphql": "^2.1.1",
-    "file-icons-js": "^1.0.3",
     "lint-staged": "^6.0.0",
     "portal-vue": "^1.3.0",
     "rimraf": "^2.6.2",

packages/@vue/cli-service/ui.js

@@ -30,7 +30,6 @@ export default {
 
 <style lang="stylus">
 @import "~@vue/ui/dist/vue-ui.css"
-@import "~file-icons-js/css/style.css"
 @import "~@/style/main"
 </style>
 

packages/@vue/cli-ui/package.json

@@ -8,7 +8,8 @@
   >
     <div class="content">
       <ItemLogo
-        :file-icon="iconClass"
+        :image="configuration.icon || (configuration.plugin && configuration.plugin.logo)"
+        fallback-icon="settings_applications"
       />
 
       <ListItemInfo
@@ -21,8 +22,6 @@
 </template>
 
 <script>
-import icons from 'file-icons-js'
-
 export default {
   props: {
     configuration: {
@@ -34,21 +33,6 @@ export default {
       type: Boolean,
       default: false
     }
-  },
-
-  computed: {
-    iconClass () {
-      return icons.getClassWithColor(this.getFileName(this.configuration.icon) || this.configuration.id) || 'gear-icon medium-blue'
-    }
-  },
-
-  methods: {
-    getFileName (icon) {
-      if (icon) {
-        if (!icon.includes('.')) return `f.${icon}`
-        return icon
-      }
-    }
   }
 }
 </script>

packages/@vue/cli-ui/src/App.vue

@@ -14,21 +14,16 @@
         icon="done"
       />
       <img
-        v-else-if="imageEnabled && !error"
+        v-else-if="!isMaterialIcon && !error"
         class="image"
-        :src="imageUrl"
-        :key="imageUrl"
+        :src="image"
+        :key="image"
         @load="loaded = true"
         @error="error = true"
       >
-      <div
-        v-else-if="fileIcon"
-        class="dynamic-file-icon"
-        :class="fileIcon"
-      />
       <VueIcon
         v-else
-        :icon="icon"
+        :icon="error || !image ? fallbackIcon : image"
       />
     </div>
   </div>
@@ -38,18 +33,13 @@
 export default {
   props: {
     image: {
-      type: String,
-      default: null
-    },
-
-    icon: {
       type: String,
       default: 'widgets'
     },
 
-    fileIcon: {
+    fallbackIcon: {
       type: String,
-      default: null
+      default: 'image'
     },
 
     selected: {
@@ -66,12 +56,8 @@ export default {
   },
 
   computed: {
-    imageEnabled () {
-      return this.image || (this.icon && this.icon.indexOf('.') !== -1)
-    },
-
-    imageUrl () {
-      return this.image || this.icon
+    isMaterialIcon () {
+      return /^[a-z0-9_]+$/.test(this.image)
     }
   },
 
@@ -112,10 +98,6 @@ export default {
       >>> svg
         fill rgba($color-text-light, .3)
 
-  .dynamic-file-icon
-    &::before
-      font-size 24px
-
   &.vuejs
     .wrapper
       background lighten($vue-ui-color-primary, 70%)