IconPark
IconPark copied to clipboard
如何方便在react native使用?
使用svg包,项目已经引入react-native-svg
目前只能通过 import {Home} from '@icon-park/svg';
导入渲染函数,然后const svg = Home({theme: 'outline'});
转换成svg数据,但这时又遇到一个问题,react-native-svg 不支持解析<?xml version="1.0" encoding="UTF-8"?>
,需要把这个标签替换掉。
目前用过下面的方法可以正常使用,但不是完美的方案,无法按需导入,需要 import * as Icon 全量导入才能用Icon[name]渲染函数。
import React from 'react'
import * as Icon from '@icon-park/svg'
import { SvgXml } from 'react-native-svg'
type Props = {
name: string
color: string
size: number
}
const SvgIcon: React.FC<Props> = ({ name, color, size }) => {
const svg = Icon[name]({
theme: 'outline',
size,
strokeWidth: 4,
fill: color
})
const xml = svg.replace(/<\?xml .*\?>/, '')
return <SvgXml xml={xml} />
}
export default SvgIcon
同问
基于react-native-iconfont-cli写了一个,https://github.com/L-x-C/react-native-iconpark-cli 凑合着用吧