I use some fontawesome icons in a quasar project.
I import them as specified in the quasar doc:
Webfont icons are available through #quasar/extras package. You don’t need to import it in your app, just configure /quasar.config.js as indicated above.
Adding more than one set:
extras: [
'material-icons',
'mdi-v6',
'ionicons-v4', // last webfont was available in v4.6.3
'eva-icons',
'fontawesome-v6',
'themify',
'line-awesome',
'bootstrap-icons'
]
As a result I do have a set of icons from the v6, unfortunately some are missing.
For instance:
is not available:
Why is this so and how could I deal with this?
This is a Pro icon.
To use it, you'll need a subscription to a Pro-level plan or a perpetual Pro license.
Related
As you can see in the bundle analyzer screenshot, our app is using both the es and lib modules from antd (this is when building for production as well as development).
The app was init:ed with CRA and we use craco to override some webpack settings, this is the only thing related to antd that we do in craco.config.js:
plugins: [
{
plugin: CracoAntDesignPlugin,
options: {
customizeTheme: antd_overrides,
},
},
],
We always use the es style import of import { Button } from 'antd'.
Is there a "simple" way to only keep the es modules? Also, I'm guessing tree-shaking isn't happening as we don't actually import 288 modules from antd... but that's a different issue I'm guessing.
I've found this on the subject: https://habr.com/en/company/vk/blog/537880/, but uncertain as to how to go about the things under the hood of CRA (babel for one).
Any help and suggestions greatly appreciated.
Could it potentially be this:
import frFR from 'antd/lib/locale-provider/fr_FR';? As I'm importing from lib? Doesn't seem to be exported as an es module thou.
I've tried different icons, however it seems all of them just show an X instead of the actual icon. There aren't any error messages, here is the code I've used:
import Icon from 'react-native-vector-icons/AntDesign';
<Icon name="heart" size={30} color="red" />
In this case, it should show a heart, but it just appears with an X with a box around it.
This post seems to have a solution, but I do not understand what they did to fix it.
react native vector icons showing X instead of icon
Anyone know how to solve this?
Found that you are using an Android emulator. In the past, I had the same issue many told me to link the project to solve the issue but RN v0.60 and above supports auto-linking, so it is not advised to use manual linking.
npx react-native link -- Avoid this for projects above RN v0.60
Automatic way to add fonts
Add this piece of code in android\app\build.gradle. I only want MaterialCommunityIcons.ttf if you want other font add them here it will be added automatically.
project.ext.vectoricons = [
iconFontNames: ['MaterialCommunityIcons.ttf'] // Add fonts needed
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
This is a manual way (If automatic didn't work)
Step 1
Move the .ttf file from the node_modules\react-native-vector-icons\Fonts that you want to android\app\src\main\assets\fonts after that cd android and run ./gradlew clean or gradlew clean
Step 2
Add this line in android\app\build.gradle
project.ext.vectoricons = [
iconFontNames: ['MaterialCommunityIcons.ttf', 'AnotherFont.ttf'] //name of all the fonts added from node_modules in step 1.
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
After that the icons will be visible. Try resetting the cache if it did not work yarn react-native start --reset-cache & yarn react-native run-android
https://github.com/oblador/react-native-vector-icons/issues/1117#issuecomment-589958315
Troubleshooting step from the library if still the above did not work you can try this.
https://github.com/oblador/react-native-vector-icons#the-icons-show-up-as-a-crossed-out-box-on-android
You forgot to load your icon...
put this after your import:
import Icon from 'react-native-vector-icons/AntDesign';
Icon.loadFont();
Cheers!
Here is a complete solution for this. copy the fonts folder from
node_modules\react-native-vector-icons\Fonts
to
android\app\src\main\assets\fonts
you can create the folder there it does not exist by default. then create a file in the root of your project
react-native.config.js
and paste this code.
module.exports = {
project: {
ios: {},
android: {}, // grouped into "project"
},
assets: ["./assets/fonts/"], // stays the same
};
I initialized a new, empty Vue application using Vue version 3. I then tried to add the plugin Vuetify with the command vue add vuetify, but received the following error. Any ideas on how to solve it?
Currently possible with Vuetify 3 Alpha:
Installation
In order for the installation to proceed correctly, vue-cli 4.0 is required. Further instructions are available at vue-cli. (check with vue -V)
Once installed, generate a project with the following command using the vue-cli 4.0:
vue create my-app
When prompted, choose Vue 3 Preview:
? Please pick a preset:
Default ([Vue 2] babel, eslint)
> Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features
It is recommended to commit or stash your changes at this point, in case you need to rollback the changes.
cd my-app
vue add vuetify
Once prompted, choose v3 (alpha):
? Choose a preset: (Use arrow keys)
Default (recommended)
Prototype (rapid development)
Configure (advanced)
> v3 (alpha)
Usage
With Vue 3.0, the initialization process for Vue apps (and by extension Vuetify) has changed. With the new createVuetify method, the options passed to it have also changed. Please see the pages in the Features section of the documentation for further details.
Next, navigate to your project directory and add Vuetify to your project:
import { createApp } from "vue";
import vuetify from "./plugins/vuetify";
import App from "./App";
const app = createApp(App);
app.use(vuetify);
app.mount("#app");
Source:
https://next.vuetifyjs.com/en/getting-started/installation/#installation
https://next.vuetifyjs.com/en/introduction/roadmap
As of July 2020 Vue 3 is unsupported by Vuetify 2.x. All components are being refactored for Vue 3 per Vuetify's task task list: https://www.notion.so/d107077314ca4d2896f0eeba49fe8a14?v=5cc7c08e9cc44021a7c86a20f189b0ba
While there is no Vuetify 3, I'd use Vue 2.x with Vuetify 2.x and install the Composition API as a package/plugin:
npm install #vue/composition-api
Then importing to your project (in main.js):
import Vue from 'vue'
import VueCompositionAPI from '#vue/composition-api'
Vue.use(VueCompositionAPI)
And finally using it in your component:
// use the APIs
import { ref, reactive } from '#vue/composition-api'
Just be aware of the limitations of this method.
Vuetify is not currently compatible with Vue 3.
Given the number of breaking changes and implementation differences in Vue 3, the entire library needs to be rewritten.
As of Jan 2021, they are targetting a Quarter 1, 2021 release for an alpha version, but the average user shouldn't expect to see a release version until late in the year, possibly even early 2022.
Until then, there are other alternatives that are Vue 3 compatible, such as Prime Vue. I believe they have Material Design themes that can be connected and a decent number of components (albeit slightly lacking in the v-app style feature coordination).
EDIT: The Vuetify v3 BETA is now available with a full release likely in Summer/Autumn of '22.
You can try vue 3 with the alpha of vuetify https://next.vuetifyjs.com/
You Must Install Vuetify 3 using the command
npm i vuetify#3.0.0-beta.11
and add it using the instruction from https://next.vuetifyjs.com/en/
As of today Dec-4-2022 Vue 3 is released for Months,
even vuetify#3.0.3 is released but the latest npm is'nt updated it is still in next even its not in beta anymore,
also the vue-cli is in Maintenance mode and for a new Vue project they recommend using the Vite base install
so the best solution is to install it from npm with the latest release from GitHub like
npm i vuetify#^3.0.0
I hope they update it soon so you can install it without the version number
I've already tried what's recommended in this screenshot
by using this line of code
import AsyncStorage from '../../../node_modules/#react-native-community/async-storage'; in the file where I'm importing async-storage from react-native
but this path is unresolved, i.e. async-storage doesn't exist in this directory. I also tried installing async-storage (even though it's already installed) by running yarn add async-storage, but nothing appeared in the previously mentioned directory
There are two ways you can do this.
Firstly import AsyncStorage correctly. This will remove the warning and fix the problem.
Secondly, suppress the warning. This will just hide the warning but will cause you issues once AsyncStorage has been removed from react-native. I would not do this as the first way actually solves the problem.
Note you can get this warning if you are using a dependency that uses AsyncStorage and still imports it the old way from react-native. Installing AsyncStorage won’t fix the error. You will need to look through your dependencies’ dependencies to find out which one is causing it.
This means actually going through the code of each your dependencies to see if they use AsyncStorage. Searching through your node modules or on the dependency's Github usually is sufficient but it can take some time to find it.
Once you have found out which one is causing it, you should open an issue or create a PR with a fix on the dependency’s repo. At this point suppressing the warning is all you can do until it is fixed.
Install AsyncStorage
Install it using your favourite package manager npm or yarn
Link the dependency
Use the dependency
Installation: choose the method you usually use
npm i #react-native-community/async-storage
or
yarn add #react-native-community/async-storage
Link the dependency (you may not have to do this if you are using 0.60+ as it has Autolinking)
react-native link #react-native-community/async-storage
Then you import it like this, and use it as before.
import AsyncStorage from '#react-native-community/async-storage';
You can see more about it by looking here
Suppress the warning.
Previously you would use YellowBox to suppress warnings, this has now changed to LogBox. The process is similar to that of YellowBox
import { LogBox } from 'react-native';
Then you can add the following
LogBox.ignoreLogs(['Warning: Async Storage has been extracted from react-native core']);
I usually do it in the App.js so it is easy to keep track of which ones I have hidden.
It won't remove the warning from your console, but it will remove any LogBox warnings associated with the error. However, I wouldn’t do this on this occasion as there is a proper fix, which is to install the dependency correctly.
Expo users
Currently Expo still imports AsyncStorage from react-native, due to this you may still experience the warning. I believe it still imports it this way for backwards compatibility reasons. A quick search of the Expo repo shows that there are many instances where it is used as you can see here. In this case your only option would be to suppress the warning. According to the Expo feature requests it is currently in progress, so hopefully it should be added to Expo shortly.
Expo Update
As of June 2020: #react-native-community/async-storage v1.11.0 can be installed in Expo managed apps. Hopefully this will lead to less of these warnings appearing as dependencies transition to the new way of importing async-storage.
Repo update
There is now a new repository for async-storage which can be found here
https://github.com/react-native-async-storage/async-storage
Check out the documentation for installation and linking instructions
https://react-native-async-storage.github.io/async-storage/docs/install/
If the source of the issue is Firebase then a working solution as of version 9.9.2 is to set the default persistence layer used by Firebase to store the authentication session to be AsyncStorage after correctly importing it:
expo install #react-native-async-storage/async-storage
then to add in firebase.js
import AsyncStorage from '#react-native-async-storage/async-storage';
import { initializeAuth, getReactNativePersistence} from 'firebase/auth/react-native';
and then to export { auth } via
const auth = initializeAuth(app, {
persistence: getReactNativePersistence(AsyncStorage)
});
export { auth };
Unlike getAuth(), initializeAuth() gives us control over the persistence layer .
Reference.
For me this issue was with #firebase.
node_modules/#firebase/app/dist/index.rn.cjs.js
following the steps above from Andrew, in vscode I was able to remove the warning.
copy "AsyncStorage"
cmd + shift + f - then paste "AsyncStorage" into search
click three dots under search '...'
right click node_modules folder select 'copy path'
add path to 'files to include' in vscode search
find one example of the import or require statement for the original (incorrect) AsyncStorage, copy that. Paste it into the search, replacing the first search query.
Once all the imports are found install the AsyncStorage correctly for the new version (as mentioned above), also add to pods, then go through and replace all
require('react-native').AsyncStorage; => require('#react-native-community/async-storage').AsyncStorage;
import AsyncStorage from 'react-native'; => import AsyncStorage from '#react-native-community/async-storage';
I did a clean build with xcode, Then all was good to go, no more warning :-)
This seems to be an ongoing issue on Firebase with React Native.
Check out this thread:
https://github.com/firebase/firebase-js-sdk/issues/1847
I have been annoyed by this similar issue and here is my warning message. I simply solved it by:
go to: 'node_modules/react-native/index.js'
simply comment out all the lines that contains 'AsyncStorage'
Then it was working fine for me.
Credits to #Rory for the below steps:
Note: We need to find var reactNative = require('react-native') in node_modules
Note: If you don't want to do the following steps, just navigate to node_modules/#firebase/auth/dist/rn/index.js
cmd + shift + f - then paste var reactNative = require('react-native') into search
click three dots under search '...'
right click node_modules folder select copy path
add path to files to include in vscode search
Then in index.js where we find our search, do the following replacements:
// var reactNative = require('react-native');
var AsyncStorage = require('#react-native-community/async-storage');
// and further below
// var reactNativeLocalPersistence = getReactNativePersistence(reactNative.AsyncStorage);
var reactNativeLocalPersistence = getReactNativePersistence(AsyncStorage);
Refresh and the warning is gone!
if you're using npm
npm install #react-native-async-storage/async-storage
yarn
yarn add #react-native-async-storage/async-storage
YellowBox has been replaced with LogBox. You can use LogBox.ignoreLogs() instead to suppress the warning
In my case firebase using asyn storage from react native . I am using v8 firebase which has no getReactNativePersistence.
So I had this solution which may be helpful.
Keep below code snippet in one file ignoreWarning.js and import in App.js on top of file .
import { LogBox } from "react-native";
const ignoreWarns = [
"AsyncStorage has been extracted from react-native",
];
const warn = console.warn;
console.warn = (...arg) => {
for (const warning of ignoreWarns) {
if (arg[0].startsWith(warning)) {
return;
}
}
warn(...arg);
};
LogBox.ignoreLogs(ignoreWarns);
Hello SO community and Angularians!
So, I am midway developing a huge platform in Angular 2. And I realized that many external libraries and dependencies for Angular 2 are migrating to the new Angular 4. Giving me many errors, obviously.
I could fork these libraries and use the forked versions and subscribe to main library development or, I could just upgrade to Angular 4 my project.
Questions to be answered in order to determinate if it's worth for me to migrate:
Compatibility with Angular 2.4
I have found some adaptations to ensure compatibility with legacy, like this: https://github.com/angular/angular/commit/e99d721
Changes app wide
Do I have to go through my whole app and start fixing things?
I mean, are main functionalities reworked in such way that I will have to review many of them?
Or, are there many build/core incompatibilities that will keep me days occupied fixing compile errors/warnings instead of developing?
I am not asking for someone to do the research for me, I am asking people that maybe already went through this process or simply know well both versions in order to give me some experience tips, clarifications, etc.
At the moment, I am doing my research here:
https://github.com/angular/angular/blob/master/CHANGELOG.md
http://angularjs.blogspot.it/2017/03/angular-400-now-available.html
https://learninglaravel.net/angular-4-new-features-and-improvements
UPDATE
I just migrated to Angular 4. The link that #PierreDuc put in his answer is a very nice tool to have a decent guideline in the migration process.
I would recommend:
Read new features and update yourself with Angular 4. This was specially useful: https://angularjs.blogspot.it/2017/03/angular-400-now-available.html
Follow Angular's guideline and modify your project: https://angular-update-guide.firebaseapp.com/
I would also recommend to commit your current project, create a new branch in your dev repository and proceed with migration in that branch.
An issue that I encountered:
Input, Output and ContentChild will be imported from a wrong path.
My case:
import { Component, OnInit, OnDestro } from '#angular/core';
import { Input, ContentChild } from "#angular/core/src/metadata/directives";
Solution:
import { Component, OnInit, OnDestroy, Input, ContentChild } from '#angular/core';
If you check the changelog there are a couple things you need to keep in mind:
Before updating
Ensure you don't use extends OnInit, or use extends with any lifecycle event. Instead use implements <lifecycle event>.
Stop using DefaultIterableDiffer, KeyValueDiffers#factories, or IterableDiffers#factories
Stop using deep imports, these symbols are now marked with ɵ and are
not part of our public API.
Stop using Renderer.invokeElementMethod as this method has been
removed. There is not currently a replacement.
During the update
Update all of your dependencies to version 4 and the latest typescript.
If you are using Linux/Mac, you can use: npm install
#angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}#4.0.0
typescript#latest --save
If you use animations in your application, you should import
BrowserAnimationsModule from #angular/platform-browser/animations in
your App NgModule.
Replace RootRenderer with RendererFactory2.
Replace Renderer with Renderer2.
After the update
Rename your template tags to ng-template.
Replace OpaqueTokens with InjectionTokens.
If you call DifferFactory.create(...) remove the ChangeDetectorRef
argument.
Replace ngOutletContext with ngTemplateOutletContext.
Replace CollectionChangeRecord with IterableChangeRecord
source
Angular team has announced , let's not call angular 2 or angular 4 let's call it Angular and there will be major update for every 6 months.I have faced the issue in angular v4.0.0 so change the configuration in webpack
new webpack.ContextReplacementPlugin(
// The (\\|\/) piece accounts for path separators in *nix and Windows
/angular(\\|\/)core(\\|\/)#angular/,
helpers.root('./src'), // location of your src
{} // a map of your routes
),
And install #angular/animations package and import in app.module.ts file
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
#NgModule({
imports: [
BrowserAnimationsModule
]
})
I will prefer to update to latest version of angular. Angular V4.0.0 has reduced the packages weight and they have increased the performance.