@fluentui/react-native-icons v2.0.240
@fluentui/react-native-icons
Fluent System Icons are a collection of familiar, friendly, and modern icons from Microsoft.
User story
@fluentui/react-native-icons
are SVG based icons wrapped in a React Native element. Because each icon is its own element, you only need to import what you need for your application.
There are two different states of each icon, Filled
and Regular
, so you can choose what works best for your application. These are by default sized to 1em
, and can be scaled up or down to suit your developer needs.
Unlike the react-icons package, styling support isn't yet available due to limited styling capabilities of RNSVG.
User flows
In order to use these icons, simply import them as import { [Componentname][state] } from @fluentui/react-native-icons
as follows:
import { AccessTimeFilled } from "@fluentui/react-native-icons";
The previous icon offerings are scalable, but if you know what size you want to use for your icons, and you are not planning on using multiple sizes, it is recommended to use the sized icons. These are the same icons as the general case, but in multiple different sizes, built to look pixel perfect at those specific sizes. You can import the sized icons in a similar way:
import { AccessTime24Filled } from "@fluentui/react-native-icons";
import {
AccessTime20Filled,
} from '@fluentui/react-native-icons';
const FluentIconsTest: React.FunctionComponent = () => {
return (
<React.Fragment>
<View style={{ flexDirection: 'column', alignItems: 'flex-start' }}>
<View style={{ flexDirection: 'row' }}>
<AccessTime20Filled />
</View>
</View>
</React.Fragment>
);
};
tags: Templates
Documentation
4 days ago
18 days ago
18 days ago
29 days ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
6 months ago
10 months ago
10 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
8 months ago
10 months ago
11 months ago
11 months ago
6 months ago
7 months ago
7 months ago
7 months ago
11 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago