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} />
}
});
Related
I'm fairly new to React Native, so apologies if this is a basic question. I'm trying to apply a Dark Theme using React Native Paper, but it won't work for some reason. My code is as follows:
import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { DarkTheme, Provider as PaperProvider } from 'react-native-paper';
import { Main } from './src/main';
const theme = {
...DarkTheme,
};
export default function App() {
return (
<SafeAreaProvider>
<PaperProvider theme={theme}>
<Main />
</PaperProvider>
</SafeAreaProvider>
);
}
It seems like this should be relatively simple. Am I missing something? Any help would be greatly appreciated.
I added the below to the theme and it now works.
colors: {
...DarkTheme.colors
}
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.
I am writing applications with React Native. I am using typescript. I am using Hook and getting an error in the application. When I searched, Hook is valid as of React-Native version 0.59.0 but I'm having trouble.
How can I solve it?
Hook Issue App
http://prnt.sc/vvkotk
import { useNavigation } from "#react-navigation/native";
import React from "react";
import { Dimensions, Image, StyleSheet } from "react-native";
import { Box, Header, Text } from "../../components";
import { useTheme } from "../../components/Theme";
const Drawer = () => {
const navigation = useNavigation();
const theme = useTheme();
return (
<Box flex={1}>
<Box flex={0.2} backgroundColor="white">
<Box
position="absolute"
top={0}
left={0}
right={0}
bottom={0}
borderBottomRightRadius="xl"
backgroundColor="secondary"
>
It looks like it doesn't recognise your custom useTheme hook. Please make sure the filename starts with use so useTheme.tsx of useTheme.jsx. Check the filename of your Drawer component as well to be sure. It should contain .jsx or .tsx.
So this is basically the code I have
import { Ionicons } from '#expo/vector-icons';
class DrawerItem extends React.Component {
render() {
return (
<Ionicons name="speedometer" size={14} color="green" />
)
}
}
I am trying to use an icon called speedometer, as found in the Ionicons documentation.
However, in its place, a question mark ? appears and I get the following error:
Warning: Failed prop type: Invalid prop `name` of value `speedometer` supplied to `Icon`, expected one of ["ios-add","ios-add-circle","ios-add-circle-outline","ios-airplane","ios-alarm","ios-albums","ios-alert","ios-american-football","ios-analytics","ios-aperture","ios-apps","ios-appstore","ios-archive","ios-arrow-back","ios-arrow-down","ios-arrow-dropdown","ios-arrow-dropdown-circle","ios-arrow-dropleft","ios-arrow-dropleft-circle","ios-arrow-dropright","ios-arrow-dropright-circle"...
The error shows me the names I can use, but makes no sense because the Ionicons documentation mentions that there is an icon called speedometer.
Another thing that I found is that that specific icon does not appear in the Expo Vector Icons documentation.
However, I would like to add it. Any way to include ALL icons from the Ionicons library?
You have to import icons this way:
import { MaterialCommunityIcons } from '#expo/vector-icons';
<MaterialCommunityIcons name="speedometer" size={24} color="black" />
As you stated Ionicons does not contain the speedometer icon. Instead use ios-speedometer.
If you really want that specific icon, I'd recommend downloading the SVG and converting it to a standalone component using e.g. react-svgr (or any other svg jsx tool)
Dont forget to install react-native-svg :)
You can now import the icon using a normal import.
E.g. import SpeedometerIcon from './icons/Speedometer.js'
I'm using Native Base 2.0+, the themes are ejected and using StyleProvider I am able to tweak and customize any Native Base component according to my theme, no problem.
Following the docs, it's stated that to add themes to a custom component we should define a namespace for said component and merge it with the instantiated styling as well. Code example below:
import React, { Component } from 'react'
import { Header, Left, Body, Right, Button, Title, Text, connectStyle } from 'native-base'
import Colors from '../Themes/Colors'
import ApplicationStyles from '../Themes/ApplicationStyles'
class NBHeader extends Component {
render () {
const styles = this.props.style
return (
<Header style={styles.header}>
<Left>
<Button transparent>
<Text style={styles.headerBackButton}>
{'< Back'}
</Text>
</Button>
</Left>
<Body>
<Title>Login</Title>
</Body>
<Right />
</Header>
)
}
}
export default connectStyle('CustomComponents.Header', ApplicationStyles)(NBHeader)
In this case, namespace for the component is 'CustomComponents.Header'. Then, we use StyleProvider to connect the Theme:
import React, { Component } from 'react';
import { StyleProvider } from 'native-base';
class CustomComponent extends Component {
render() {
return (
// connect styles to props.style defined by the theme
const styles = this.props.style;
<StyleProvider style={customTheme}>
Your Custom Components
</StyleProvider>
);
}
}
// Define your own Custom theme
const customTheme = {
'yourTheme.CustomComponent': {
// overrides CustomComponent style...
}
};
Since I've ejected the theme, I entered the new namespace for the Custom Component in NB's Theme file, so it should already be added and cascaded using StyleProvider.
So for instance, if I want the header to be 'red' and have a padding of '10' due to theming rules, I add those as default props of 'CustomComponents.Header' and forget about it, it will always be applied to the component as long as the StyleProvider is cascading themes.
The problem is I cannot get this defined Custom Component's default theme to be applied. I don't know if it's a problem with my code or how Native Base works. Any help would be appreciated and I can provide further code if needed.