I am using Webpack + Vue + vue-fontawesome.
The code below works fine and display icons.
import #fortawesome/free-solid-svg-icons
But this one doesn't display icons.
import faCalendarCheck component in #fortawesome/free-regular-svg-icons
Similary, other components in #fortawesome/free-regular-svg-icons are not working.
Component do render comment line of HTML <\!---->.
Why #fortawesome/free-regular-svg-icons is not working?
main.js
// Font Awesome
import { library } from '#fortawesome/fontawesome-svg-core';
import {
faThLarge,
// faCalendarCheck,
faBell,
faAddressBook,
faCalculator,
faSitemap,
faEnvelope,
faWindowMaximize,
faFileAlt,
faNewspaper,
} from '#fortawesome/free-solid-svg-icons';
import {
faCalendarCheck,
} from '#fortawesome/free-regular-svg-icons';
library.add(faThLarge);
library.add(faCalendarCheck);
library.add(faBell);
library.add(faAddressBook);
library.add(faCalculator);
library.add(faSitemap);
library.add(faEnvelope);
library.add(faWindowMaximize);
library.add(faFileAlt);
library.add(faNewspaper);
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome';
Vue.component('font-awesome-icon', FontAwesomeIcon);
app.vue
<template>
<font-awesome-icon icon="calendar-check" />
</template>
package.json
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.2",
"#fortawesome/free-brands-svg-icons": "^5.2.0",
"#fortawesome/free-regular-svg-icons": "^5.2.0",
"#fortawesome/free-solid-svg-icons": "^5.2.0",
"#fortawesome/vue-fontawesome": "^0.1.1"
}
You need to specify a prefix for using non solid icons.
In your example this should work:
<font-awesome-icon :icon="['far', 'calendar-check']" />
More info can be found here.
One more tip - Instead of writing this:
library.add(faThLarge);
library.add(faCalendarCheck);
library.add(faBell);
etc...
you can simplify it to:
library.add(faThLarge, faCalendarCheck, faBell);
Related
I use bootstrap-vue in my nuxt project and bootstrap-vue-icons for icons. Everything works nice, but i can't colorize my icons.
Plugin import
import Vue from 'vue'
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'
Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)
Icon component
<b-icon variant="danger" icon="check-circle"></b-icon>
package.json
"bootstrap-vue": {
"version": "2.23.1",
"requires": {
"#nuxt/opencollective": "^0.3.2",
"bootstrap": "^4.6.1",
"popper.js": "^1.16.1",
"portal-vue": "^2.1.7",
"vue-functional-data-merge": "^3.1.0"
}
},
I have tried as variant prop either dinamicaly binding color styles, it has not worked.
There are multiple ways of doing this:
Notic variant="danger" gives the red color by default. Watch this
you can add id and style it with css like:
<b-icon `variant="danger"` id="danger_icon" icon="check-circle" ></b-icon>
#danger_icon{
color:blue;
}
or change the default variant="danger" which is a class .text-danger color using css again
`<b-icon variant="danger" icon="check-circle" ></b-icon>`
.text-danger {
color: black !important;
}
Watch this demo: jsfiddle
I work for an organization that try to migrate a project from Vue CLI 4 to Vue CLI 5.
The project uses Vuetify and we have SCSS files that are used in the styles/variables.scss file (required by Vuetify to customize style) and also used in Vue components files via #import (SCSS variables sometimes need to be in the <script> section).
Here some example that show how SCSS variables are used through the app:
// styles/variables.scss
#import "colors.scss";
$some-vuetify-sass-variable: $color // from (colors.scss)
// plugins/vuetify.js
import { primaryColor } from "#/style/colors.scss";
Vue.use(Vuetify);
const options = {
theme: {
dark: false,
themes: {
light: {
primary: primaryColor,
// ...
},
},
},
};
export default new Vuetify(options);
// Component.vue
<template>
<v-chip
:color="clearPrimaryColor"
text-color="primary"
/>
</template>
<script>
import { clearPrimaryColor } from "#/style/colors.scss";
export default {
name: "Component",
created() {
this.clearPrimaryColor = clearPrimaryColor;
}
}
</script>
<style lang="scss">
.some-class {
background-color: $clearPrimaryColor
}
</style>
During the Vue CLI migration, we also tried to upgrade some Vuetify dependencies (sass and vuetify-loader). Upgrading sass from 8 to 10 version triggers a compile sass error.
With this reproduction branch: https://github.com/KevinFabre/vue-cli-5-vuetify-scss-variables-in-js (sass 8.0.0), the project does compile.
And for this one: https://github.com/KevinFabre/vue-cli-5-vuetify-scss-variables-in -js/tree/error/sass-error (sass 10.0.0), it does not compile:
ERROR Failed to compile with 2 errors
error in ./src/styles/app.module.scss
Syntax Error: SassError: This file is already being loaded.
╷
2 │ #import "app.module.scss";
│ ^^^^^^^^^^^^^^^^^
╵
src/styles/variables.scss 2:9 #import
src/styles/app.module.scss 1:9 root stylesheet
Is there extra Vue CLI 5 configuration to allow CSS import in JS while using Vuetify sass override ?
We've submitted issues to vuetify-loader and Vue CLI but didn't receive any reply for now:
https://github.com/vuetifyjs/vuetify-loader/issues/234
https://github.com/vuejs/vue-cli/issues/7083
{
"devDependencies": {
"#babel/preset-env": "^7.11.0",
"#cypress/webpack-preprocessor": "^5.4.1",
"#mdi/font": "^6.5.95",
"#vue/cli-plugin-babel": "^4.4.5",
"#vue/cli-plugin-e2e-cypress": "^4.4.5",
"#vue/cli-plugin-eslint": "^4.4.5",
"#vue/cli-service": "^4.4.5",
"#vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.0.1",
"core-js": "^3.6.5",
"eslint": "^7.3.1",
"eslint-plugin-mocha": "^9.0.0",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-unused-imports": "^1.1.5",
"eslint-plugin-vue": "^7.0.0",
"eslint-plugin-vuetify": "^1.1.0",
"lint-staged": "^10.2.11",
"sass": "~1.32.0",
"sass-loader": "^10.0.0",
"style-resources-loader": "^1.2.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"vue-cli-plugin-style-resources-loader": "^0.1.3",
"vue-cli-plugin-vuetify": "^2.0.6",
"vue-svg-loader": "^0.16.0",
"vue-template-compiler": "^2.6.12",
"vuetify-loader": "^1.7.3",
}
}
Thank you for your time.
Components must avoid importing files that are already imported in the global variables stylesheet (src/styles/variables.scss). This was the case with app.module.scss (loaded in src/styles/variables.scss and in src/components/HelloWorld.vue), causing the error about the file being loaded twice.
One solution is to move the color definitions from app.module.scss into its own file, and import that in variables.scss instead of app.module.scss. Then, components could import app.mdoule.scss without running into the original problem.
/* src/styles/app.module.scss *
:export {
whitecolor: $white-color;
darkcolor: $dark-color;
lightcolor: $light-color;
mediumcolor: $medium-color;
alertcolor: $alert-color;
lightblackcolor: $light-black-color;
blackcolor: $black-color;
}
/* src/styles/colors.scss */
$white-color: #fcf5ed;
$dark-color: #402f2b;
$light-color: #e6d5c3;
$medium-color: #977978;
$alert-color: #cb492a;
$light-black-color: #706e72;
$black-color: #414042;
/* src/styles/variables.scss */
#import "~vuetify/src/styles/settings/_colors.scss";
#import "colors.scss";
$material-light: (
background: map-get($grey, "lighten-1")
);
demo
This basically pertains to duplicate parsing of the import files, declared in your vuejs app.
There are 2 ways to solve it:
Use #use instead of #import where you are getting the Sass import error. Like, #import "app.module.scss"; becomes #use "app.module.scss";
Other alternative is to downgrade the sass-loader library to "^8.0.2"
Let me know if the above solutions work for you, meanwhile i will update my answer if i find any new solution.
I added font awesome in inertiajs/vue3 app
as I read here :
Using Font Awesome in Vue 3
So I have package.json :
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.36",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/vue-fontawesome": "^3.0.0-5",
and icons are rendered ok with syntax like :
<font-awesome-icon :icon="['fas', 'phone']" />
But where is library of all available icons for my version?
I tried to show dollar-sign/dollar and failed...
Thanks !
Don't forget to add icons or icon bundles in your main.js or in your ts file depending on how you've set it up.
import { faPhone } from "#fortawesome/free-solid-svg-icons/faAddressBook";
library.add(faPhone);
Make sure you add the import of the icons and then also add the icon to the library. Below you can see entire bunldes of icons being added at once.
import { fas } from '#fortawesome/free-solid-svg-icons'
import { far } from '#fortawesome/free-regular-svg-icons'
import { fab } from '#fortawesome/free-brands-svg-icons'
To see a list of all icons.
This is the Package.Json File
Following are package versions I am using
"dependencies": {
"#expo/vector-icons": "^9.0.0",
"expo": "^32.0.6",
"native-base": "2.8.1",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-fontawesome": "^6.0.1",
"react-navigation": "^3.3.0"
},
This is My HearderPart.Js Component Code
I am unable to use native-base package in my component.
import {Container, Header, Content, Footer, Title} from 'native-base';
import React, {Component} from 'react-native';
export default class HeaderPart extends Component {
render() {
return (
<Container>
<Header>
<Title>Header</Title>
</Header>
<Content>
<Title>Content</Title>
</Content>
<Footer>
<Title>Footer</Title>
</Footer>
</Container>
);
}
}
Error Message
It seems that you are importing React from the wrong place. Currently in your HeaderPart component you are doing the following:
import React, {Component} from 'react-native';
You should be importing React like this:
import React, {Component} from 'react';
Importing React correctly should fix your issue.
i am using #expo/vector-icons here is my package.json file
"dependencies": {
"#expo/vector-icons": "^4.1.1",
"color": "^1.0.3",
"expo": "^30.0.1",
"moment": "^2.22.2",
"react": "16.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-
30.0.0.tar.gz",
"react-native-extended-stylesheet": "^0.4.0" },
when i import #expo/vector-icon library in my component
import { Ionicons } from '#expo/vector-icons';
it gives error
The library comes by default so you don't need to install #expo/vector-icons.
You can just do this for example:
import { Ionicons } from '#expo/vector-icons';
and then you can use it like:
<Ionicons name="ios-pizza" color="red" size={200} />
FYI, this directory is helpful in finding different icons https://expo.github.io/vector-icons/
In your dependencies (package.json) remove #expo/vector-icons. They are included in the expo package and different versions of expo and expo/vector-icons can cause errors like this one.
From the official docs:
This library is installed by default on the template project that get
through expo init -- it is part of the expo package. It includes
popular icon sets and you can browse all of the icons using the
#expo/vector-icons directory.
Update 2021:
The official docs changed a bit, and instead of searching for icons in:
#expo/vector-icons directory
You can now search using:
icons.expo.fyi
This makes it far easier than before.
Go to 'https://icons.expo.fyi/' choose whatever you want, then import via copy, then use it.
import React from 'react'
import { Entypo } from '#expo/vector-icons';
import { View } from 'react-native';
export const Example = () => {
return(
<View>
<Entypo name="plus" size={24} color="black" />
</View>
)
}
Delete your node module folder and run expo init. And run the project