coreui / coreui-icons

CoreUI Free Icons - Premium designed free icon set with marks in SVG, Webfont and raster formats
https://coreui.io/icons/
Other
1.97k stars 153 forks source link

Most of icons are not working with Vuejs #29

Closed Choi-Sung-Hoon closed 3 years ago

Choi-Sung-Hoon commented 3 years ago

Below is a part of package.json

  "dependencies": {
    "@coreui/coreui": "^3.2.0",
    "@coreui/icons": "^2.0.0-beta.5",
    "@coreui/utils": "^1.3.1",
    "@coreui/vue": "^3.1.1",
    "@coreui/vue-chartjs": "^1.0.5",
    "@webplayer/coreplayer": "^0.2.3",
    "axios": "^0.19.2",
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-advanced-cropper": "^0.17.3",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0",
    "vuex-persistedstate": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.4.0",
    "@vue/cli-plugin-eslint": "~4.4.0",
    "@vue/cli-plugin-router": "~4.4.0",
    "@vue/cli-plugin-vuex": "~4.4.0",
    "@vue/cli-service": "~4.4.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^5.16.0",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^6.2.2",
    "prettier": "^1.19.1",
    "vue-template-compiler": "^2.6.11",
    "node-sass": "~4.14.1",
    "sass-loader": "~8.0.2"
  }

and the problem is that most of icons with cil-, ,cis-.. are not working.

It even doesn't work in Coreui admin template.

For example,

{
        _name: 'CSidebarItem',
        name: '**************',
        to: '/',
        icon: 'cil-clock',
      },

If I use cil-clock nothing shows up.

Choi-Sung-Hoon commented 3 years ago

I found out the solution.

Coreui has its own icon assets here: src/assets/icons

image

and you should declare what icons you are going to use here: src/assets/icons/icons.js

image

now you are happy with the icon names in official document.

{
    _name: 'CSidebarNavItem',
    name: '*******',
    to: '/,
    icon: 'cil-clock',
},

image