react-native-svg#SvgProps TypeScript Examples
The following examples show how to use
react-native-svg#SvgProps.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Send.tsx From react-native-crypto-wallet-app with MIT License | 6 votes |
|
function SvgSent(props: SvgProps) {
return (
<Svg
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
rotation={-45}
{...props}
>
<Circle cx={12} cy={12} r={10} />
<Path d="M12 16l4-4-4-4M8 12h8" />
</Svg>
);
}
Example #2
| Source File: Github.tsx From Covid19 with MIT License | 6 votes |
|
SvgGithub = (props: SvgProps) => {
return (
<Svg
width={24}
height={24}
fill="none"
stroke="black"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
{...props}
>
<Path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22" />
</Svg>
);
}
Example #3
| Source File: Eye.tsx From react-native-crypto-wallet-app with MIT License | 6 votes |
|
function SvgEye(props: SvgProps) {
return (
<Svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
className="eye_svg__feather eye_svg__feather-eye"
viewBox="0 0 24 24"
width="24"
height="24"
{...props}
>
<Path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
<Circle cx={12} cy={12} r={3} />
</Svg>
);
}
Example #4
| Source File: StickyItemBackground.tsx From react-native-sticky-item with MIT License | 5 votes |
|
AnimatedSvg = Animated.createAnimatedComponent(
Svg
) as React.ComponentClass<
Animated.AnimateProps<ViewStyle, SvgProps & { style: ViewStyle }>,
any
>
Example #5
| Source File: Logo.tsx From react-native-crypto-wallet-app with MIT License | 5 votes |
|
function SvgLogo(props: SvgProps) {
return (
<Svg
width={124}
height={122}
viewBox="0 0 124 122"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M22.566 15.626l25.056 8.997L61.35 1 22.566 15.626zM82.312 37.075l-34.69-12.452L61.35 1l20.962 36.075zM122.632 51.55l-40.32-14.475L61.35 1l39.724 14.626 21.558 35.925zM122.632 51.551l-21.963 17.115-18.357-31.59 40.32 14.475z"
fill="#347AF0"
stroke="#fff"
strokeWidth={1.5}
strokeLinejoin="round"
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M122.632 51.55l-7.605 41.83-14.359-24.714 21.964-17.115z"
fill="#347AF0"
stroke="#fff"
strokeWidth={1.5}
strokeLinejoin="round"
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M115.028 93.38h-43.92L86.31 79.85l14.359-11.183 14.359 24.713z"
fill="#347AF0"
stroke="#fff"
strokeWidth={1.5}
strokeLinejoin="round"
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M115.028 93.38L82.6 120.834H40.257l30.85-27.456h43.921z"
fill="#347AF0"
stroke="#fff"
strokeWidth={1.5}
strokeLinejoin="round"
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M71.108 93.38l-30.85 27.455-4.616-27.456h35.466zM40.257 120.835L7.671 93.379h27.971l4.615 27.456z"
fill="#347AF0"
stroke="#fff"
strokeWidth={1.5}
strokeLinejoin="round"
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M35.642 93.38H7.672l21.69-37.33 6.28 37.33zM29.361 56.049l-21.69 37.33-6.67-41.829 21.565-35.924 6.795 40.423z"
fill="#347AF0"
stroke="#fff"
strokeWidth={1.5}
strokeLinejoin="round"
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M47.622 24.623l-18.26 31.426-6.796-40.422 25.056 8.996z"
fill="#347AF0"
stroke="#fff"
strokeWidth={1.5}
strokeLinejoin="round"
/>
</Svg>
);
}
Example #6
| Source File: BottomBar.tsx From companion-kit with MIT License | 5 votes |
|
export default function BottomBar(props: Props) {
const { screen } = props;
const backgroundColor = screen === 'home' ? Colors.home.bg : Colors.pageBg;
const showIndicator = process.appFeatures.GOALS_ENABLED && AppViewModel.Instance.Goals.activeGoals.length > 0;
const getGoalsIcon = () => {
const goalsScreen = screen === 'goals';
if (showIndicator) {
return goalsScreen ? Images.goalsIndicatorActive : Images.goalsIndicator;
}
return goalsScreen ? Images.goalsActive : Images.goals;
};
const ArchiveIcon: React.ComponentClass<SvgProps, any> = screen === 'home' ? Images.activeArchiveIcon : Images.archiveIcon;
const ProfileIcon: React.ComponentClass<SvgProps, any> = screen === 'profile' ? Images.activeProfileIcon : Images.profileIcon;
const SettingsIcon: React.ComponentClass<SvgProps, any> = screen === 'settings' ? Images.settingsIconActive : Images.settingsIcon;
const GoalsIcon: React.ComponentClass<SvgProps, any> = getGoalsIcon();
const iconSize = process.appFeatures.GOALS_ENABLED ? 32 : 28;
return (
<View style={[BaseStyles.container, styles.container, { backgroundColor: backgroundColor }]}>
<TouchableOpacity style={styles.button} onPress={() => GlobalTrigger(GlobalTriggers.Home)}>
<ArchiveIcon width={iconSize} height={iconSize} color={'#000000'} />
</TouchableOpacity>
{process.appFeatures.GOALS_ENABLED ?
<TouchableOpacity style={styles.button} onPress={() => GlobalTrigger(GlobalTriggers.Goals)}>
<GoalsIcon width={iconSize} height={iconSize} />
</TouchableOpacity>
: null}
<AddStoryButton
width={55}
height={55}
onPress={() => GlobalTrigger(GlobalTriggers.CreateStory)}
/>
<TouchableOpacity style={styles.button} onPress={() => GlobalTrigger(GlobalTriggers.Profile)}>
<ProfileIcon width={iconSize} height={iconSize} />
</TouchableOpacity>
{process.appFeatures.GOALS_ENABLED ?
<TouchableOpacity style={styles.button} onPress={() => GlobalTrigger(GlobalTriggers.Settings)}>
<SettingsIcon width={iconSize} height={iconSize} />
</TouchableOpacity>
: null}
</View>
);
}
Example #7
| Source File: Argentine.tsx From react-native-crypto-wallet-app with MIT License | 5 votes |
|
function SvgArgentine(props: SvgProps) {
return (
<Svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
fill="none"
viewBox="0 0 40 40"
width="24"
height="24"
{...props}
>
<Path
fill="url(#argentine_svg__pattern0)"
fillRule="evenodd"
d="M20 40c11.046 0 20-8.954 20-20S31.046 0 20 0 0 8.954 0 20s8.954 20 20 20z"
clipRule="evenodd"
/>
<Mask id="argentine_svg__a" width={40} height={40} x={0} y={0} maskUnits="userSpaceOnUse">
<Path
fill="#fff"
fillRule="evenodd"
d="M20 40c11.046 0 20-8.954 20-20S31.046 0 20 0 0 8.954 0 20s8.954 20 20 20z"
clipRule="evenodd"
/>
</Mask>
<G mask="url(#argentine_svg__a)">
<Rect
width={55.5}
height={39.5}
x={-7.75}
y={0.25}
fill="#fff"
stroke="#F5F5F5"
strokeWidth={0.5}
rx={1.75}
/>
<Mask id="argentine_svg__b" width={56} height={40} x={-8} y={0} maskUnits="userSpaceOnUse">
<Rect
width={55.5}
height={39.5}
x={-7.75}
y={0.25}
fill="#fff"
stroke="#fff"
strokeWidth={0.5}
rx={1.75}
/>
</Mask>
<G mask="url(#argentine_svg__b)">
<Path
fill="#88BBE8"
fillRule="evenodd"
d="M-8 13h56V0H-8v13zM-8 40h56V27H-8v13z"
clipRule="evenodd"
/>
<Path
fill="#F4B32E"
stroke="#DB7A2C"
strokeWidth={0.667}
d="M20 24.333a4.333 4.333 0 100-8.666 4.333 4.333 0 000 8.666z"
/>
</G>
</G>
<Defs>
<Pattern
id="argentine_svg__pattern0"
width={1}
height={1}
patternContentUnits="objectBoundingBox"
>
<Use transform="scale(.0039)" xlinkHref="#argentine_svg__image0" />
</Pattern>
</Defs>
</Svg>
);
}
Example #8
| Source File: mood.ts From companion-kit with MIT License | 5 votes |
|
MoodImages: { [mood: number]: React.ComponentClass<SvgProps> } = {
[Moods.Rough]: Images.roughIcon,
[Moods.Difficult]: Images.difficultIcon,
[Moods.Mixed]: Images.mixedIcon,
[Moods.Positive]: Images.positiveIcon,
[Moods.VeryPositive]: Images.veryPositiveIcon,
}
Example #9
| Source File: StatusDeposited.tsx From react-native-crypto-wallet-app with MIT License | 5 votes |
|
function SvgStatusdeposited(props: SvgProps) {
return (
<Svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 62 62"
width="24"
height="24"
{...props}
>
<Path
fill="#75BF72"
fillRule="evenodd"
stroke="#fff"
strokeWidth={4}
d="M32 62c16.569 0 30-13.431 30-30C62 15.431 48.569 2 32 2 15.431 2 2 15.431 2 32c0 16.569 13.431 30 30 30z"
clipRule="evenodd"
/>
<Path
fill="#000"
fillRule="evenodd"
d="M22.277 41.723a13.71 13.71 0 010-19.446 13.71 13.71 0 0119.446 0 13.71 13.71 0 010 19.446 13.71 13.71 0 01-19.446 0zm6.187-4.95c-.707 0-1.237-.53-1.237-1.238 0-.707.53-1.237 1.237-1.237h4.066l-4.95-4.95c-.53-.53-.53-1.237 0-1.767.53-.53 1.238-.53 1.768 0l4.95 4.95v-4.066c0-.708.53-1.238 1.237-1.238.708 0 1.238.53 1.238 1.238v7.07c0 .177 0 .354-.088.443 0 .176-.177.353-.266.441-.088.089-.265.266-.441.266-.089.088-.266.088-.443.088h-7.07zm11.49 3.182a11.203 11.203 0 01-15.909 0 11.203 11.203 0 010-15.91 11.203 11.203 0 0115.91 0 11.203 11.203 0 010 15.91z"
clipRule="evenodd"
/>
<Mask
id="status_deposited_svg__a"
width={28}
height={28}
x={18}
y={18}
maskUnits="userSpaceOnUse"
>
<Path
fill="#fff"
fillRule="evenodd"
d="M22.277 41.723a13.71 13.71 0 010-19.446 13.71 13.71 0 0119.446 0 13.71 13.71 0 010 19.446 13.71 13.71 0 01-19.446 0zm6.187-4.95c-.707 0-1.237-.53-1.237-1.238 0-.707.53-1.237 1.237-1.237h4.066l-4.95-4.95c-.53-.53-.53-1.237 0-1.767.53-.53 1.238-.53 1.768 0l4.95 4.95v-4.066c0-.708.53-1.238 1.237-1.238.708 0 1.238.53 1.238 1.238v7.07c0 .177 0 .354-.088.443 0 .176-.177.353-.266.441-.088.089-.265.266-.441.266-.089.088-.266.088-.443.088h-7.07zm11.49 3.182a11.203 11.203 0 01-15.909 0 11.203 11.203 0 010-15.91 11.203 11.203 0 0115.91 0 11.203 11.203 0 010 15.91z"
clipRule="evenodd"
/>
</Mask>
<G mask="url(#status_deposited_svg__a)">
<Path fill="#fff" d="M47 47H17V17h30z" />
</G>
</Svg>
);
}
