React-native-ui-kitten: Using SVG with Kitten UI Icon

[amrhassab]

Hello Kitten UI,

I was able to use .svg files in my react native application by using react-native-svg and react-native-svg-transformer.
now I can simply import SVGs and use them like so

import PrimaryLogo from '../../assets/images/primary-logo.svg';
...
<View><PrimaryLogo width="10%" height="70%" /></View>

I was wondering how I can use this with your Icon (or Button)

I know how to use icon libraries but this is a custom brand Icon that I would like to use

Thank you for your time

[CostachescuCristinel]

Hi, have a look at this guide, it seems to be exactly what you need:

https://akveo.github.io/react-native-ui-kitten/docs/guides/icon-packages#tip-asset-icon-package

[amrhassab]

@CostachescuCristinel thanks for your reply but all of these examples are for integrating third party Icon packages. All I want to do is to use my custom .svg file with kitten UI Icon

[CostachescuCristinel]

Are you having any issues in particular?

I haven't tried yet, but I think you can simply create a function that returns an SVG component, using the react-native-svg package.

import Svg, { Circle } from "react-native-svg";

function MyCircleIcon(imageProps){
    const { width, height, tintColor, marginHorizontal } = imageProps.style;
    // Eva theme's Icon defaults: { width: 24, height: 24, marginHorizontal=8, tintColor: "some hex, can't remember" }
    return <Svg width={width} height={height}>
        <Circle cx="12" cy="12" r="10" stroke="blue" strokeWidth="2" fill={tintColor} />
    </Svg>;
}

function ButtonWithMyIcon(){
    return <Button accessoryLeft={ MyCircleIcon }>Press me!</Button>;
}

Even better, you could use react-native-svg-transformer to import and compile SVG files at build time:

metro.config.js
(copy-pasted from here: UI-Kitten: Improving performance - Using with 3rd party Metro configurations )

const MetroConfig = require('@ui-kitten/metro-config');
const defaultConfig = require('metro-config/src/defaults').getDefaultValues();

const evaConfig = {
  evaPackage: '@eva-design/eva',
};

module.exports = MetroConfig.create(evaConfig, {
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
  resolver: {
    assetExts: defaultConfig.resolver.assetExts.filter(ext => ext !== 'svg'),
    sourceExts: [...defaultConfig.resolver.sourceExts, 'svg']
  },
});

Anywhere in your code:

// ... import your files, ect..
import MyCircleIcon from "./assets/my-circle-icon.svg"; // react-native-svg-transformer will create a React Component out of your svg file

function ButtonWithMyIcon(){
    return <Button accessoryLeft={ MyCircleIcon }>Press me!</Button>;
}

[amrhassab]

I am using react-native-svg-transformer I just want to use my SVG with an Icon not a Button but I will try again later and let you know, Im stuck on something else on the moment. Thanks you very much for your time.

[artyorsh]

@amrhassab https://github.com/akveo/react-native-ui-kitten/issues/1070#issuecomment-626566107

[CostachescuCristinel]

@amrhassab The Icon Packages - Tip: Asset Icon Package guide provides all the means to do so. In the IconProvider function you can write code to return a <Svg ... /> component, that renders whatever SVG file you have.
To make your life easier, using react-native-svg-transformer will allow you to simply use the import myIcon from "./assets/my_icon.svg"; syntax; the imported SVG file is converted into a functional component, that renders an <Svg /> component (through react-native-svg) - and that will render your SVG icon.

// using react-native-svg-transformer
import MySvgIcon from "./assets/my_svg_icon.svg"; // equivalent of: function(){ return <Svg ... />; }

// ...

const IconProvider = (source) => ({
  toReactElement: ({ animation, ...props }) => (
    <MySvgIcon />
  ),
});

// ...

[amrhassab]

@CostachescuCristinel thank you for your time =)