Skip to content

Instantly share code, notes, and snippets.

@nixolas1
Created May 14, 2020 11:20
Show Gist options
  • Save nixolas1/ff596cbad13bfc5bce2346efd2595c37 to your computer and use it in GitHub Desktop.
Save nixolas1/ff596cbad13bfc5bce2346efd2595c37 to your computer and use it in GitHub Desktop.
A quick react native version of the StreamlineIcon React package. Styles and classnames are missing, and would need to be remade with React-Native styling.
import React from "react"
import camelcaseKeys from "camelcase-keys"
import Svg, {G, Path} from "react-native-svg"
import {Home} from "@streamlinehq/streamline-light/lib/interface-essential"
export const StreamlineIcon = ({
icon,
fill,
size,
stroke,
width,
height,
customClassName,
}) => {
const getSize = () => {
//Default
let sizeObject = {
width: icon[1],
height: icon[2],
isDefault: true,
}
if (size) {
sizeObject.isDefault = size === sizeObject.width
sizeObject.height = size
sizeObject.width = size
} else {
if (height && parseInt(height) !== sizeObject.height) {
sizeObject.height = height
sizeObject.isDefault = false
}
if (width && parseInt(width) !== sizeObject.width) {
sizeObject.width = width
sizeObject.isDefault = false
}
}
return sizeObject
}
const getStyle = () => {
let sizeObj = getSize()
delete sizeObj.isDefault
return {...sizeObj}
}
const renderIcon = () => {
const sizes = getSize()
const renderPaths = () => {
return icon[4].map((path, index) => {
let options = {...camelcaseKeys(icon[3][index])}
options.stroke = stroke || icon[3][index].stroke
options.fill = fill || icon[3][index].fill
return React.createElement(
Path,
Object.assign({}, options, {
key: Math.random().toString(),
d: path,
}),
)
})
}
return React.createElement(
Svg,
{
viewBox: "0 0 ".concat(sizes.width, " ").concat(sizes.height),
style: {...getStyle()},
width: sizes.width,
height: sizes.height,
},
!sizes.isDefault
? React.createElement(
G,
{
transform: "scale("
.concat(sizes.width / icon[1], ",")
.concat(sizes.height / icon[2], ")"),
},
renderPaths(),
)
: renderPaths(),
)
}
return renderIcon()
}
StreamlineIcon.defaultProps = {
size: 24,
pulse: false,
spin: false,
fast: false,
easeInOut: false,
infinite: false,
customClassName: null,
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment