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.
Related
Hi Im using Nuxt JS for my project and I noticed that my js files are getting rather big
And my question is how can I make it smaller or split vendor or js files that are over 1mb
Also I have seen that font-awesome is also taking a lot of space
How can I remove all of this unecessary libraries and make js files smaller ?
Font awesome is: 200KB
free-solid-svg-icons: 194KB
vendor.app: 1MB
This is how I was able to shave off 1+ MB
First, if you are using nuxt-fontawesome module, remove it. I was not able to figure out how to optimize it, even if I explicitly listed the icons I cared about.
Instead, I created a font-awesome plugin and used the library as mentioned in the README.
font_awesome_icons.js
import Vue from 'vue'
import { library, config } from '#fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
import { faGem } from '#fortawesome/free-regular-svg-icons/faGem'
import { faFacebookF } from '#fortawesome/free-brands-svg-icons/faFacebookF'
import { faUser } from '#fortawesome/free-solid-svg-icons/faUser'
library.add(faGem, faFacebookF, faUser)
Vue.component('font-awesome-icon', FontAwesomeIcon)
nuxt-config.js
// ...
plugins: [
{ src: '~/plugins/font_awesome_icons.js', mode: 'client' }
],
// ...
index.vue
<template>
<font-awesome-icon :icon="['fab', 'facebook-f']" />
</template>
<script>
export default {
}
</script>
<style>
</style>
Before
After
The Office UI Fabric license only allows use of the icons in Office Apps. I'd like to substitute alternative icons but I'm not sure how to do it.
Specifically, I'd like to override the icons in the MessageBar component i.e. the icon on the left and the X on the right.
Use registerIcons to register new icons e.g. Here's how to do it with font awesome to register icons for a blocked MessageBar:
import { library } from "#fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import {
faExclamationCircle,
faTimes
} from "#fortawesome/free-solid-svg-icons";
import { registerIcons } from "#uifabric/styling";
library.add(faExclamationCircle);
library.add(faTimes);
registerIcons({
icons: {
blocked2: <FontAwesomeIcon icon={faExclamationCircle} />,
clear: <FontAwesomeIcon icon={faTimes} />
}
});
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
I am trying to get Font Awesome icons running my React Native application by following the instructions posted here. However, after completing the instructions, my simulator doesn't load the application and the command line gives me the following error:
error: bundling failed: Error: While trying to resolve module `#fortawesome/fontawesome-svg-core` from file `/Users/agaidis/Auto-ID-Lab/AudioApp/App.js`, the package `/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/#fortawesome/fontawesome-svg-core/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/#fortawesome/fontawesome-svg-core/index.js`. Indeed, none of these files exist:
* `/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/#fortawesome/fontawesome-svg-core/index.js(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)`
* `/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/#fortawesome/fontawesome-svg-core/index.js/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)`
at ResolutionRequest.resolveDependency (/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:92:15)
at DependencyGraph.resolveDependency (/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/node-haste/DependencyGraph.js:237:485)
at Object.resolve (/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/lib/transformHelpers.js:116:25)
at dependencies.map.result (/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:298:29)
at Array.map (<anonymous>)
at resolveDependencies (/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:294:16)
at /Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:159:33
at Generator.next (<anonymous>)
at step (/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:239:307)
at /Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:239:467
BUNDLE [ios, dev] ../../index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.
My code is as follows:
App.js
import React, {Component} from 'react';
import {AppRegistry} from 'react-native';
import MainApp from './src/components/MainApp';
import AudioExample from './src/components/AudioExample';
// For icons we use font awesome
import { library } from '#fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faStroopwafel } from '#fortawesome/free-solid-svg-icons';
library.add(faStroopwafel)
AppRegistry.registerComponent('audioApp', () => MainApp);
export default MainApp;
Relevant piece of LangPage.js:
import React from 'react'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import {View, Text, StyleSheet, Picker} from 'react-native'
import PropTypes from 'prop-types'
import Menu from './Menu'
class LangPage extends React.Component{
static propTypes = {
List: PropTypes.array.isRequired,
passFunc: PropTypes.func.isRequired,
}
render(){
return(
<View style={styles.container}>
<View style={styles.boxContainers}>
<FontAwesomeIcon icon="stroopwafel" />
<Text style={styles.header}>Select a Language</Text>
</View>
<View style={[styles.boxContainers, styles.menuBox]}>
<Menu givenL={this.props.List} selectFunc={this.props.passFunc}/>
</View>
</View>
)
}
}
For reference, I am using:
"#fortawesome/fontawesome-svg-core": "^1.2.0-14",
"#fortawesome/free-solid-svg-icons": "^5.1.0-11",
"#fortawesome/react-fontawesome": "0.1.0-11",
"i": "^0.3.6",
"npm": "^6.3.0",
"react": "16.4.1",
"react-native": "0.56.0"
Any thoughts on how I could fix this? Thanks!
Good morning,
I strongly recommend you to use the react-native-vectors-icons library instead of directly using fontAwesome. It may be why it doesn't work. For more informations, click here.
EDIT: You need to import the react-native-vector-icons in your dependencies. Go in your package.json file and type this line in the 'dependencies' section :
"react-native-vector-icons": "^4.5.0",
In your LangPage.js file, you will be able to import them like this :
import Icon from 'react-native-vector-icons/FontAwesome';
With that done, you will be able to display easily icons from font-awesome in your react native components, just like that :
<Icon
color={Colors.primaryBackground}
name={stroopwafel}
size={40}
/>
Hope it helped :)
Have a good day
William is on the right track for getting you where you want to be, however, there are a couple of things missing from his answer.
react-native-vector-icons needs to be linked, either by running
react-native link react-native-vector-icons
or by following the manual linking example in the README.
You can check if linking has worked correctly by checking the following files;
Android:
android/app/src/main/java/.../MainApplication.java
android/settings.gradle
android/app/build.gradle
iOS:
ios/<APP_NAME>/Info.plist
ios/<APP_NAME>/<APP_NAME>.xcodeproj/project.pbxproj
I may have missed some files, but these should be the main ones.
If you have used react-native-create-app and have an expo project that hasn't been ejected yet, then I would recommend using the expo vector-icons package.
Hope this helps.
just:
npm i --save #fortawesome/react-native-fontawesome
remove the libraries
"react-native-linear-gradient": "^2.5.6",
"react-native-vector-icons": "^4.5.0",
and then Reload (cmd+R) the app
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);