feat: add TablerIcons #255

packages/core/package.json

@@ -30,10 +30,13 @@
   "author": "Kirill Lebedev <[email protected]>",
   "license": "MIT",
   "peerDependencies": {
-    "react-native": ">=0.66.4",
     "react": ">=17.0.2",
+    "react-native": ">=0.66.4",
+    "react-native-safe-area-context": ">=4.4.1",
     "react-native-svg": ">=12.3.0",
-    "react-native-svg-transformer": ">=1.0.0",
-    "react-native-safe-area-context": ">=4.4.1"
+    "react-native-svg-transformer": ">=1.0.0"
+  },
+  "dependencies": {
+    "@tabler/icons-react-native": "^3.7.0"
   }
-}
+}

packages/core/src/styles/icons/index.ts

@@ -1,2 +1,4 @@
 export * from './font';
 export * from './svg';
+
+export * from '@tabler/icons-react-native';

src/pages/MainStack/Home/Core/Styles/ui/index.tsx

@@ -2,6 +2,7 @@ import {FlatList, useStyles, View} from '@shared/ui';
 import getScreenStyles from '@shared/styles/getScreenStyles';
 import {ShadowWidget} from '@widgets/Core/Styles/ui/ShadowWidget';
 import {SimpleIconWidget} from '@widgets/Core/Styles/ui/SimpleIconWidget';
+import {TablerIconWidget} from '@widgets/Core/Styles/ui/TablerIconWidget';
 
 const renderItem = () => <View />;
 
@@ -16,6 +17,7 @@ const StylesScreen = () => {
       ListFooterComponent={
         <>
           <ShadowWidget />
+          <TablerIconWidget />
           <SimpleIconWidget />
         </>
       }

src/widgets/Core/Styles/ui/TablerIconWidget.tsx

@@ -0,0 +1,56 @@
+import {
+  createStyles,
+  IconArrowUp,
+  IconAvocado,
+  IconBackpack,
+  useStyles,
+  View,
+} from '@shared/ui';
+import Header from '@shared/ui/Header';
+
+export const TablerIconWidget = () => {
+  const [styles] = useStyles(style);
+  return (
+    <View style={styles.container}>
+      <Header title={'TablerIcon'} />
+      <View style={styles.content}>
+        <IconBackpack color={'red'} />
+        <IconArrowUp size={50} />
+        <IconAvocado strokeWidth={1} size={50} fill={'blue'} color={'purple'} />
+      </View>
+    </View>
+  );
+};
+
+const style = createStyles(({shadows, spaces, colors}) => ({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  content: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+
+    gap: spaces.Space12,
+  },
+  item: {
+    alignItems: 'center',
+  },
+  box: {
+    backgroundColor: colors.BgSecondary,
+    margin: spaces.Space8,
+    height: spaces.Space64,
+    width: spaces.Space64,
+  },
+  shadowSmall: {
+    ...shadows.small,
+  },
+  shadowMedium: {
+    ...shadows.medium,
+  },
+  shadowLarge: {
+    ...shadows.large,
+  },
+}));

yarn.lock

@@ -3006,6 +3006,18 @@
     deepmerge "^4.3.1"
     svgo "^3.0.2"
 
+"@tabler/icons-react-native@^3.7.0":
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/@tabler/icons-react-native/-/icons-react-native-3.7.0.tgz#e44c6dd54ab82d705625642e50e160ddab8b1ab6"
+  integrity sha512-kIy6JF75y3m70mhCOTaT3V1FERVOxPZ7IcvjAaO96YTaweHk7B+W2f2Ptd+hSHBVeA0nRHsK0wb8ZY9Wt6i5vA==
+  dependencies:
+    "@tabler/icons" "3.7.0"
+
+"@tabler/[email protected]":
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-3.7.0.tgz#b522723844644b50ccaddd0fd19a91c0eb3095da"
+  integrity sha512-lJGIZLSWrPO6VygRUbaVvQjWgL2EaiBMD8e6leCYUQ8ZPO4LIzKMq358C8KlhXJcyNiRz1Io3YWoc/DNTcWqSg==
+
 "@testing-library/react-hooks@^8.0.0":
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/@testing-library/react-hooks/-/react-hooks-8.0.1.tgz#0924bbd5b55e0c0c0502d1754657ada66947ca12"