I'm trying to add/change Font Awesome icon in JHipster 5 app.
I can print only icons that already in default template.
I can change:
<fa-icon [icon]="'home'"></fa-icon>
<span>
<span jhiTranslate="global.menu.home">Home</span>
</span>
to:
<fa-icon [icon]="'asterisk'"></fa-icon>
<span>
<span jhiTranslate="global.menu.home">Home</span>
</span>
but can't change to
<fa-icon [icon]="'tv'"></fa-icon>
<span>
<span jhiTranslate="global.menu.home">Home</span>
</span>
or any other icon.
Are they defined in some place?
Icons are in src/main/webapp/app/vendor.ts, here you can add new icons.
To complete Alexandre answer ;
Example to add the twitter icon :
(in "jhipsterVersion": "5.1.0")
read node_modules/#fortawesome/angular-fontawesome/README.md
yarn add #fortawesome/free-brands-svg-icons in src/main/webapp/app/vendor.ts
declare your icon :
.
import { faTwitter } from '#fortawesome/free-brands-svg-icons';
library.add(faTwitter);
in your html, use and don't forget to tell it is from fab (Brand)
.
<fa-icon [icon]="['fab', 'twitter']"></fa-icon>
Maybe you should also re-run webpack:build. But for me it worked directly
(see the top of of src/main/webapp/app/vendor.ts)
/* after changing this file run 'yarn run webpack:build' */
For Jhipster 6 the file to define icons to be used is
src/main/webapp/app/core/icons/font-awesome-icons.ts:
import { faAmazon } from '#fortawesome/free-brands-svg-icons';
export const fontAwesomeIcons = [
faAmazon,
faUser,
...
and remember to refer to the icon with (note 'fab' instead of 'fa' for brands icons):
<fa-icon [icon]="['fab', 'amazon']"></fa-icon>
If you plan to include brands free icons (amazon icon is there) you should also install the npm package:
npm install --save #fortawesome/free-brands-svg-icons
If you tried to add your icons like so:
vendor.ts
import {
// other imports
faFileSignature,
faLock
} from '#fortawesome/free-solid-svg-icons';
// other imports
library.add(faFileSignature);
library.add(faLock);
but it didn't work and you get an error telling you that global styles are deprecated, I fixed it like this.
I created a new icon.module.ts and imported it in the shared-libs.module.ts.
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FontAwesomeModule, FaIconLibrary } from '#fortawesome/angular-fontawesome';
import { fas } from "#fortawesome/free-solid-svg-icons";
#NgModule({
declarations: [],
imports: [
CommonModule,
FontAwesomeModule
]
})
export class IconsModule {
constructor(library: FaIconLibrary) {
library.addIconPacks(fas);
}
}
I hope I helped.
Related
i cant seem to get tailwind-rn to work on my app, i have tried all the suggestions made everywhere but still can't figure out whats wrong. CSS files and json are building properly when i run yarn build:tailwind.
Here is my code, please feel free to ask for more info...
App.js
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import { useTailwind } from "tailwind-rn";
import { TailwindProvider } from "tailwind-rn";
import utilities from "./tailwind.json";
export default function App() {
const tw = useTailwind();
return (
<TailwindProvider utilities={utilities}>
<View style={tw("justify-center flex-1 items-center")}>
<Text style={tw("text-red-600 justify-center")}>
Open up App.js to start working on your!
</Text>
<StatusBar style="auto" />
</View>
</TailwindProvider>
);
}
Tailwind-config.js
module.exports = {
content: ["./*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
corePlugins: require("tailwind-rn/unsupported-core-plugins"),
};
My directory
I have tried all the recommendations here:
Why is my Tailwind ract native not changing anything?
the official GitHub repo for tailwind-rn.
I am expecting my app's UI to update using tailwind but nothing happens
Did you edit the global.css/input.css file to add these?
#tailwind base;
#tailwind components;
#tailwind utilities;
How can I change the default appearance of a button, so every time I create a button it will look the same? I understand how to i.e. use the color theme to change the i.e. "primary" color, and how to change the css for i.e. all button background colors.
But how would I go about if I for example want:
All buttons to automatically appear as "small" and "tile" by default?
Create your own component, e.g. like this one at src/components/XBtn.vue:
<template>
<v-btn
v-bind="$props"
small
tile
v-on="$listeners"
>
<slot></slot>
</v-btn>
</template>
<script>
import VBtn from 'vuetify/lib/components/VBtn/'
export default {
name: 'XBtn',
props: VBtn.options.props,
}
</script>
Then elsewhere in your app, you can import it:
<template>
<v-row>
<x-btn color="primary">Save</x-btn>
</v-row>
</template>
<script>
import XBtn from '#/components/XBtn'
export default {
name: 'SomeOtherComponent',
components: {
XBtn,
},
}
</script>
Or if you want it to be globally available without having to import it each time, you can register it in src/main.js like this:
// ... other imports ...
import XBtn from '#/components/XBtn'
Vue.component('x-btn', XBtn)
new Vue({
// ... main Vue instance config ...
})
The cool thing about doing it this way is that the XBtn component you derive from VBtn will have ALL of the same properties and events. XBtn will default to small and tile but you can still override these by doing something like: <x-btn large>. You basically use it the exact same way that you use VBtn.
[EDIT April 19th]
I have created a CODESANDBOX to show the problem, of course, that doesn't occur in sandbox.
The only difference between this code and mine is that I have duplicated the code of the Button component in the SANDBOX example, whereas in my App the Button component is imported from a library (that belongs to the same yarn workspace as the app). The library is built with webpack and babel, excluding React and Material-UI
externals: {
react: "react",
"react-dom": "react-dom",
"react-router": "react-router",
"react-router-dom": "react-router-dom",
"#material-ui/core": "#material-ui/core",
"#material-ui/icons": "#material-ui/icons",
"#material-ui/lab": "#material-ui/lab",
"#material-ui/styles": "#material-ui/styles",
formik: "formik",
},
Inspecting the components in the Browser shows the difference when styling, between sandbox and my app :
on both sides, the class are applied to the component the same way:
in sandbox
in my app
but on sandBox, the MuiButtonBase-root background-color is overridden by the MuiButton-root background-color
whereas it is the opposite in my app. The MuiButton-root backGroundColor seems to be overriden bu the MuiButtonBase-root background-color
However, if I create a component RecreatedButton in the App by just importing the Button component of my UI Library, and re-exported it without changing anything (just passing a specific props the component is requested), then the styling is applied correctly, as in the sandbox example.
this is kind of weird to me...
Why such a behavior ?
just importing and rexporting as is the component
import {
Button as LibraryButton,
EButtonTypes,
IButtonProps,
} from "#mylibrairy/reactcomponentscommon"; <---- importing the button
import React from "react";
const RecreatedButton: React.FC<IButtonProps> = (
props: IButtonProps
): JSX.Element => {
return (
<LibraryButton type={EButtonTypes.BUTTON}>
{props.children}
</LibraryButton>
);
};
export { RecreatedButton };
Using both in app.ts. One got the theme, the other not
import { ThemeProvider } from "#material-ui/core/styles";
import {
Button as LibraryButton,
EButtonTypes,
IButtonProps,
} from "#mylibrairy/reactcomponentscommon"
import React from "react";
import AppBar from "../../UIComponents/AppBar";
import { RecreatedButton } from "../../UIComponents/Button";
import { MUITheme } from "./../../Theming/defaultTheme";
export const MainApp: React.FC = (): JSX.Element => {
return (
<ThemeProvider theme={MUITheme}>
<>
<AppBar />
<LibraryButton type={EButtonTypes.BUTTON}> I'm the library component, directly used as is, and background color is NOT CORRECT ></LibraryButton>
<RecreatedButton>
I'm recreated button, just rexporting the library component, and the backgroundcolor is correct !?!?{" "}
</RecreatedButton>
</>
</ThemeProvider>
);
};
finally I found one solution (not sure that it fixes the root cause as I still do not understand where it comes from).
I Guess it may helps some people here that are facing a similar issue with global theming in Material-Ui.
It turned out that I had to change the way to build my react/material-Ui components library #mylibrairy/reactcomponentscommon.
1- Make sure that in the library, all imports where such as import { Button} from "#material-ui/core" and not for example import Button from "#material-ui/core/Button"
2- Remove the usage of file-loader plugin in the .babelrc to make sure it doesn't change the way to import material-ui components
3- Push #material-ui/core and #material-ui/icons as a dev and peer dependencies in the package.json of the library.
4- Rebuilt the library using webpack and babel to compile typescript tsx to js.
All issues of priority seems to disappear (have done a lot of tests and checked in the chrome dev tools). In the example above, the .MuiButton-root class is well applied after the .MuiButtonBase-root one, thus overriding as expected the backgroundColor.
Would admit that I'm a little bit confused why this fixed the issue...
Rgds
For me, i just had to import "makeStyles" and "createStyles" from "#material-ui/core" not from "#material-ui/core/styles". i just did this and it fixed the issue but took me a lot of time to figure this out.
so import them like this:
import { makeStyles, createStyles } from "#material-ui/core";
not like this:
import { makeStyles, createStyles } from "#material-ui/core/styles";
You may try overriding default globals for MuiButtonBase
const theme = createMuiTheme({
props: {
// Name of the component ⚛️
MuiButtonBase: {
// The default props to change
root:{
backgroundColor: 'red'
}
},
},
});
function DefaultProps() {
return (
<ThemeProvider theme={theme}>
<Button>Change default props</Button>
</ThemeProvider>
);
}
Working sandbox here - https://codesandbox.io/s/override-button-base-7qwd5
Has any one got mwc-icon (0.7.1) to work with lit-element (pwa-starter-kit)?
mwc-button renders OK but mwc-icon does not render the icon just the icon index text.
import { html } from 'lit-element';
import { PageViewElement } from './page-view-element.js';
import {Icon} from "#material/mwc-icon" //does not work
import {Button} from "#material/mwc-button"
import { SharedStyles } from './shared-styles.js';
class MyView1 extends PageViewElement {
static get styles() {
return [
SharedStyles
];
}
render() {
return html`
<section>
<h2>Example</h2>
<mwc-icon>bookmark</mwc-icon>
<mwc-button outlined label="outlined"></mwc-button>
`;
}
}
window.customElements.define('my-view1', MyView1);
I think you encounter the same problem I did.
It happens because Chrome process the #font-face attribute only once at first page load.
when you import the mwc styles you expect them to enable in the lit-element render - after the first initial load of the page. that will work, you'll see the new styles except for the #font-face attribute.
That's why you don't see the icon.
A quick workaround is to append the link both on the head section in
index.html and in the lit-element as you did.
you can see example that don't work
and example that work
The difference is the added link in index.html head section.
More details here: github thread
Hope I helped you with this.
I was stuck on it myself for quite some time
Normally this is how a Module is integrated or bootstrapped with the main.ts.
import {platformBrowserDynamic} from'#angular/platform-browser-dynamic'
import {AppModule} from './app.module'
platformBrowserDynamic().bootstrapModule(AppModule)
But in case we have tow modules say :
AppModule- which works with the UI related changes/ modificaitons
DataModule- which works to communicate/modify/display data related interfaces
Both AppModule and DataModule handle the UI modificaitons but being concerned with respective UI modification objectives, I want to work with two modules but at the same time.
How shall I begin with?
Will this approach be able to render both modules and perform independent operations?
at index.html
...
...
<body class="container">
<!--Listing Selectors for loading App-Module -->
<events-app></events-app>
<events-list></events-list>
<!-- listing Selectors for loading Data-Module -->
<events-data></events-data>
<filter-data></filter-data>
</body>
...
...
at main.ts
import {platformBrowserDynamic} from'#angular/platform-browser-dynamic'
import {AppModule} from './app.module'
import {DataModule} from './data.module'
platformBrowserDynamic().bootstrapModule(AppModule, DataModule)
Well I've did something like in my Angular 4 app by just doing some configuration in main.ts and tsconfig.json and its working perfectly fine. You can follow the below steps and can try.
Step 1: Create your module and declare root components which you want to load when you bootstrap that module.
Ex. Here I've created user.module.ts
import { NgModule } from '#angular/core';
// root component of usermodule
import { UserAppComponent } from './userapp.component';
#NgModule({
imports:[FormsModule,HttpModule],
declarations:[UserAppComponent],
providers:[],
bootstrap:[UserAppComponent]
})
export class UserModule { }
Step 2: Go to main.ts
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app.module';
import { UserModule } from './user.module';
window.platform = platformBrowserDynamic();
window.AppModule = AppModule;
window.UserModule = UserModule;
Step 3: Go to tsconfig.json and insert your newly created module and component in "files" array
"files":[
//....your other components ...//
"myapp/user.module.ts",
"myapp/userapp.component.ts",
]
Step 4: Now you are ready to bootstrap angular module wherever you want from your .js file. Like I've bootstrap like this from my .js file. Bootstrapping may differ based on your requirement but step 1 to 3 should be same.
window.platform.bootstrapModule(window.UserModule);