react-native中使用svg图标

原创 2018年04月15日 17:35:13

在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>


效果图


在java中实现对FORM的打印功能

在JAVA实现对FORM的打印功能public void print(JFrame frame){  Container container=frame.getContentPane();  Prop...
  • programlover
  • programlover
  • 2001-10-07 09:48:00
  • 554

React Native关于TabBar使用自定义矢量位图的流程

使用React Native开发项目中,TabBar使用png图标时总是有问题,于是决定使用自定义矢量位图,具体流程如下: 1.使用AI软件制作SVG格式图标; 2.访问http://fontel...
  • dahuang001
  • dahuang001
  • 2016-08-04 09:58:25
  • 1240

react-native与svg整合 ----- react-native-svg

React-Native 与Iconfont整合 1、从阿里妈妈上选择自己所需要的素材,下载源代码 http://www.iconfont.cn/ 下载后得到的iconfont.ttf ic...
  • liyh0804
  • liyh0804
  • 2018-01-09 14:03:20
  • 296

SVG ICON 添加使用

SVG ICON的几个使用方法: 第一种Inline SVG这种方法就是直接把SVG标签写入到HTML中去,直接通过修改fill和stroke属性来控制填充颜色和边框颜色,但是缺点就是维护性不好,如...
  • thingir
  • thingir
  • 2017-01-20 13:31:31
  • 658

react-native-vector-icons使用(二)

react-native-vector-icons使用(二)使用react-native-vector-icons大多都需要自定义,将项目图片转为ttf字体图标进行使用。框架的使用及自定义详细见:ht...
  • u010940770
  • u010940770
  • 2017-05-08 19:11:30
  • 2898

React-Native 使用自定义IconFont

转载自在React Native中优雅的使用iconfont1.把字符对应表给整出来var map = {"arrow":"62976","checked":"62977","checked-s":"...
  • q617610589
  • q617610589
  • 2016-08-02 14:08:55
  • 6463

在SVG中使用Bootstrap或FontAwesome图标字体

参考链接: http://stackoverflow.com/questions/14984007/how-do-i-include-a-font-awesome-icon-in-my-svg原理上...
  • u014291497
  • u014291497
  • 2017-05-20 10:30:31
  • 1244

Android应用开发之PNG、IconFont、SVG图标资源优化详解

在我们App开发中大家可能都会有过如下痛疾(程序员和设计妹妹注意喽):好多小的图标好烦人,又占体积还要考虑分辨率,一拉伸就模糊等。同一个图标不同状态还有不同颜色的多张。总是幻想IOS、Android、...
  • yanbober
  • yanbober
  • 2015-12-27 12:03:24
  • 13162

超实用的高清图标SVG解决方案全总结(上)

随着硬件快速的发展,Retina技术发展至今,目前Google Nexus6的devicePixelRatio已经到了3.5,虽然目前主流的Retina显示器还是以 devicePixelRat...
  • qq_36648555
  • qq_36648555
  • 2017-11-04 00:01:51
  • 661

CSS3+SVG 响应式图标设计

除了网页内容、布局需要进行响应式设计之外,有时图标也需要针对不同的屏幕尺寸做出相应的调整。本文简单介绍一个使用SVG图和CSS3来实现的响应式设计实例。1. CSS代码,Logo的背景使用了一张svg...
  • iefreer
  • iefreer
  • 2015-01-07 22:52:00
  • 5351
收藏助手
不良信息举报
您举报文章:react-native中使用svg图标
举报原因:
原因补充:

(最多只允许输入30个字)