diff --git a/docs/src/articles/guides/icon-packages.md b/docs/src/articles/guides/icon-packages.md index 9e63a5e7b..da862eb5b 100644 --- a/docs/src/articles/guides/icon-packages.md +++ b/docs/src/articles/guides/icon-packages.md @@ -143,7 +143,7 @@ const HomeScreen = () => ( const App = () => ( - + @@ -220,8 +220,8 @@ By passing an array of icon packs, we can register it in the application: import React from 'react'; import { ApplicationProvider, IconRegistry, Layout, Text } from '@ui-kitten/components'; import { mapping, light as lightTheme } from '@eva-design/eva'; -import { FeatherIconsPack } from './feather-icons.js'; // <-- Import Feather icons -import { MaterialIconsPack } from './material-icons.js'; // <-- Import Material icons +import { FeatherIconsPack } from './feather-icons'; // <-- Import Feather icons +import { MaterialIconsPack } from './material-icons'; // <-- Import Material icons const HomeScreen = () => ( @@ -270,6 +270,80 @@ That's it. Here is a result that you might have
+## Tip: Asset Icon Package + +By using same technique, this may be also useful to create an Icon package for all of available icons in assets. + +With a similar to [3rd party Icon packages guide](guides/icon-packages#3rd-party-icon-packages) way, create an Asset Icons provider. + +```jsx +import React from 'react'; +import { Image } from 'react-native'; + +const IconProvider = (source) => ({ + toReactElement: ({ animation, ...style }) => ( + + ), +}); + +export const AssetIconsPack = { + name: 'assets', + icons: { + 'github': IconProvider(require('../assets/images/github.png')), + 'color-palette': IconProvider(require('../assets/images/color-palette.png')), + // ... + }, +}; +``` + +### Register Icons + +By passing an array of icon packs, we can register it in the application: + +```jsx +import React from 'react'; +import { ApplicationProvider, IconRegistry, Layout, Text } from '@ui-kitten/components'; +import { EvaIconsPack } from '@ui-kitten/eva-icons'; +import { mapping, light as lightTheme } from '@eva-design/eva'; +import { AssetIconsPack } from './asset-icons'; // <-- Import Feather icons + +const HomeScreen = () => ( + + HOME + +); + +const App = () => ( + + + + + + +); + +export default App; +``` + +### Usage + +When using multiple icon packages, you're able to choose an icon library with simply changing `pack` property. + +```jsx +import React from 'react'; +import { Button, Icon } from '@ui-kitten/components'; + +export const GithubIcon = (style) => ( + +); + +export const GithubButton = () => ( + +); +``` + +
+ ## Conclusion In this guide, you learned how to use UI Kitten Icon component. Since Eva Icons relies on svg icons, consider reading react-native-svg documentation to become more familiar with it. Also, if you your icon pack of choice relies on vector icons, read react-native-vector-icons docs.