Home > Web Front-end > JS Tutorial > body text

React Native implements custom icons

零到壹度
Release: 2018-03-28 14:35:32
Original
2105 people have browsed it

This article mainly shares with you a method of implementing custom icons in React Native. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor to have a look.

Take the react-native-vector-icons component as an example

Use the Ionicons.ttf font, which is introduced in the

node_modules/react-native-vector-icons/Fonts/Ionicons.ttf
Copy after login

method

 import Icon from 'react-native-vector-icons/Ionicons';
Copy after login

Open http://fontstore.baidu.com/static/editor/index.html, open the Ionicons.ttf font


You can go to http:// www.iconfont.cn/Search for icons and download svg format


Click on the newly imported icon to modify the "glyph information"


Open

node_modules/react-native-vector-icons/glyphmaps/Ionicons.json
Copy after login

Add the corresponding value, do not repeat it with the existing one

React Native implements custom icons

Finally in the component The effect of using

React Native implements custom icons

is as follows

React Native implements custom icons

The above is the detailed content of React Native implements custom icons. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!