Open ruuderie opened 4 years ago
moxdata
commented
4 years ago You have to install the following: npm install material-icons --save Then Import it to your project: import 'material-icons/iconfont/material-icons.css';
https://lusaxweb.github.io/vuesax/development/#material-icons
Fanna1119
commented
4 years ago Not sure about fontawesome but I can install material icons via material-design-icons and then load it into my nuxt config as follows. Not sure if this is considered a good or bad practice.
css: [
'vuesax/dist/vuesax.css',
'node_modules/material-design-icons/iconfont/material-icons.css'
],
I am new to your library and am having trouble getting the icons to appear when using the library in my project.
The instructions on your documentation say the following:
FontAwesome and other fonts library are supported. Simply use the icon-pack with fa or fas. You still need to include the Font Awesome icons in your project.
I've installed the library and implemented the select component in the same way it's demonstrated on the site here but the I am still getting the following:
"KEYBOARD_ARROW_DOWN" instead of the icon
If someone can help me resolve this I am more than happy to submit a pull request on the website nuxt users so that they don't run into the same issue.
I have a global.js file that brings in the components for this library like this: import Vuesax from 'vuesax' import 'vuesax/dist/vuesax.css' Vue.use(Vuesax)
I am using nuxt ssr: mode: 'universal' modules: [ '@nuxtjs/axios', ['cookie-universal-nuxt', { alias: 'cookies' }], '@inkline/nuxt' ], inkline: { treeShaking: true, scss: true, //components: ['ILayout','ILayoutHeader','ILayoutContent','ILayoutFooter'] }, plugins: [ '~/plugins/axios', '~/plugins/global', ], build: { /* * You can extend webpack config here / extend (config, ctx) { } }
These are the dependencies on my package.json
"dependencies": { "@fortawesome/fontawesome": "^1.1.8", "@fortawesome/fontawesome-free-brands": "^5.0.13", "@fortawesome/fontawesome-free-solid": "^5.0.13", "@fortawesome/free-solid-svg-icons": "^5.13.0", "@inkline/inkline": "^2.0.0", "@inkline/nuxt": "^2.0.0", "@nuxtjs/axios": "^5.3.1", "@nuxtjs/markdownit": "^1.2.1", "@salesforce-ux/design-system": "^2.11.6", "auth0-js": "^9.11.3", "chart.js": "^2.9.3", "cookie-universal-nuxt": "^2.1.3", "core-js": "^2.6.11", "express": "^4.17.1", "node-sass": "^4.14.0", "nuxt": "^2.0.0", "nuxt-fontawesome": "^0.4.0", "nuxt-fullpage.js": "^0.0.3", "path": "^0.12.7", "sass-loader": "^8.0.2", "vue": "^2.6.11", "vue-chartjs": "^3.5.0", "vue-countup-v2": "^4.0.0", "vue-server-renderer": "^2.6.11", "vuesax": "^3.11.13", "vuetable-2": "^1.7.5", "vuetning": "^0.4.2" }