react-native中使用svg图标

本文介绍如何在React Native项目中使用SVG图标,包括安装和配置react-native-svg插件的过程,以及创建和使用SVG图标组件的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在web开发中我喜欢svg图标:

    1、矢量图标,不会因屏幕大小失真;

    2、文件大小,svg图标比png图标小;

    3、灵活性,可以修改图标颜色,实现图标复用;

    所以在进行react-native开发的时候,在图标选择上,选择使用svg图标,在使用react-native时,通过Image require svg图片时,不会显示,搜索资料才知道,react-native不支持require "svg图片",也不支持svg

在react-native中使用svg图标需要引入react-native-svg插件:    

npm install react-native-svg --savereact-native link react-native-svg

    引入react-native-svg插件之后,就可以在react-native中编写svg

Image控件不支持svg图标的导入,需要将svg图标转换js文件

import React from "react";
import Svg,{
Path
} from 'react-native-svg';


const Add = props => (
<Svg width={props.width || 512} height={props.height || 512} viewBox="0 0 512 512">
<Path fill={props.color || '#ccc'} d="M416 277.67V96h42.666v138.667H416v42.666z"></Path>
</Svg>
);

export default Add;

使用svg js组件

import Add from './assets/Add';
<Add width={100} height={100} color={'#000'}></Add>


效果图


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值