status-im
/
nimbus-gui
mirror of https://github.com/status-im/nimbus-gui.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Create and use Icon component

This commit is contained in:
RadoslavDimchev 2023-07-21 21:10:16 +03:00
parent 7673585986
commit 898c8f7140
5 changed files with 25 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Icon/Icon.jsx Normal file
View File

@ -0,0 +1,9 @@
import { Image } from "tamagui";
const Icon = ({ source, width = 16, height = 16, ...props }) => {
return (
<Image {...props} source={{ uri: source }} width={width} height={height} />
);
};
export { Icon };

1
src/components/Icon/index.jsx Normal file
View File

@ -0,0 +1 @@
export { Icon } from "./Icon";

5
src/components/IconText/IconText.jsx
View File

@ -1,4 +1,5 @@
import { Image, Paragraph, XStack } from "tamagui"; import { Paragraph, XStack } from "tamagui";
import { Icon } from "../Icon/Icon";
const IconText = ({ icon, text }) => { const IconText = ({ icon, text }) => {
return ( return (
@ -8,7 +9,7 @@ const IconText = ({ icon, text }) => {
}} }}
space={"$3"} space={"$3"}
> >
<Image source={{ uri: icon }} width={16} height={16} /> <Icon source={icon} width={16} height={16} />
<Paragraph color={"#000000"}>{text}</Paragraph> <Paragraph color={"#000000"}>{text}</Paragraph>
</XStack> </XStack>
); );

10
src/components/InformationBox/InformationBox.jsx
View File

@ -1,4 +1,5 @@
import { Image, Paragraph, XStack } from "tamagui"; import { Paragraph, XStack } from "tamagui";
import { Icon } from "../Icon";
const InformationBox = ({ icon, text }) => { const InformationBox = ({ icon, text }) => {
return ( return (
@ -12,7 +13,12 @@ const InformationBox = ({ icon, text }) => {
}} }}
space={"$2"} space={"$2"}
> >
<Image source={{ uri: icon }} width={12} height={12} style={{marginTop: '6px'}} /> <Icon
source={icon}
width={12}
height={12}
style={{ marginTop: "6px" }}
/>
<Paragraph color={"#647084"}>{text}</Paragraph> <Paragraph color={"#647084"}>{text}</Paragraph>
</XStack> </XStack>
); );

7
src/components/Logo/Logo.jsx
View File

@ -1,5 +1,6 @@
import { Image, XStack } from "tamagui"; import { XStack } from "tamagui";
import { Tag } from "../Tag"; import { Tag } from "../Tag";
import { Icon } from "../Icon";
const Logo = () => { const Logo = () => {
return ( return (
@ -9,8 +10,8 @@ const Logo = () => {
}} }}
space={"$2"} space={"$2"}
> >
<Image source={{ uri: "/icons/marks.png" }} width={60} height={60} /> <Icon source={"/icons/marks.png"} width={80} height={60} />
<Image source={{ uri: "/icons/nimbus.png" }} width={80} height={17} /> <Icon source={"/icons/nimbus.png"} width={80} height={17} />
<Tag bc="#2A4AF5" text="BETA" /> <Tag bc="#2A4AF5" text="BETA" />
</XStack> </XStack>
); );