Skip to content

Instantly share code, notes, and snippets.

@lucianomlima

lucianomlima/images.js

Created April 5, 2017 18:02
Show Gist options
  • Save lucianomlima/d231ddafd9b5215b59a1ed8875886918 to your computer and use it in GitHub Desktop.
Save lucianomlima/d231ddafd9b5215b59a1ed8875886918 to your computer and use it in GitHub Desktop.
Download ZIP
Exemplo de uso de ícones em SVG. Localização dos arquivos: app/config/
Raw
images.js
/* eslint-disable global-require */
const images = {
app_logo: require('../images/app_logo.png'),
carsystem_logo: require('../images/carsystem_logo.png'),
carsystem_tecnologia_logo: require('../images/carsystem_tecnologia_logo.png'),
ibahia: require('../images/ibahia.png'),
ibahia_mono: require('../images/ibahia_mono.png'),
circuitos: {
dodo: require('../images/circuito_dodo.png'),
osmar: require('../images/circuito_osmar.png')
},
markers: {
user: require('../images/markers/user.png'),
trio: require('../images/markers/trio.png'),
banheiro: require('../images/markers/sanitarios.png'),
posto_saude: require('../images/markers/postos_saude.png'),
posto_policial: require('../images/markers/policia.png'),
taxi: require('../images/markers/taxi.png'),
onibus: require('../images/markers/onibus.png'),
bombeiros: require('../images/markers/bombeiros.png'),
juizado_menores: require('../images/markers/juizado_menores.png')
}
};
const icons = {
correio: [
'<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50">',
'<path fill="#EC1A3B" d="M30.238,1.544L19.76,1.544L19.76,17.244L19.76,18.448L18.597,18.137L3.429,14.072L0.717,24.198L15.883,28.262L17.043,28.572L16.442,29.611L8.591,43.211L17.673,48.455L24.202,37.148L25,35.766L25.798,37.148L32.326,48.455L41.408,43.211L33.559,29.611L32.957,28.572L34.117,28.262L49.283,24.198L46.568,14.072L31.402,18.137L30.238,18.448L30.238,17.244z" />',
'</svg>'
].join(''),
fitdance: [
'<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1264px" height="780px" viewBox="0 0 1264 780" enable-background="new 0 0 1264 780">',
'<rect x="-210.765" y="-122.5" fill="none" width="1656.533" height="1024" />',
'<path fill="#BA68C8" d="M1247.552,594.128c-1.696-18.9-41.06,14.569-81.651,26.237c-38.789,11.148-78.697,1-87.929-35.243 c-2.184-8.575,14.984-14.178,33.124-23.567c18.432-9.541,37.999-22.927,55.806-39.055c68.22-61.784,79.167-126.888,21.559-186.226 c-27.877-28.727-95.786-28.224-134.183,4.669c-57.487,49.231-76.416,198.506-33.6,286.003 C908.056,718.011,853.313,572.254,901.234,423.5c6.719-20.855,35.482-76.958,74.924-103.198 c44.911-29.878,101.076-16.723,101.076-46.802c0-46.01-82-34-82-34S952.46,243.275,905.894,277 c-36.024,26.091-71.274,68.596-91.659,154.5c-42,177,17,316,120,316c80.837,0,128.406-43.111,145.139-61.666 c5.844,2.33,12.021,4.119,18.549,5.295C1170.501,704.202,1253.432,659.692,1247.552,594.128 M1063.115,441.266 c11.307-34.069,36.108-54.275,58.433-46.31c22.321,7.967,27.569,43.093,13.78,76.235c-8.893,21.371-35.151,54.156-57.474,46.189 C1055.533,509.414,1055.203,465.104,1063.115,441.266" />',
'<path fill="#BA68C8" d="M559.427,485.975c0,0-38.717-228.924-142.399-207.753c-23.09,4.715-46.365,24.54-67.351,53.427 c-0.339-17.49-0.777-35.621-1.267-53.932c-3.006-112.332-8.847-231.172-15.353-247.55c-11.588-29.163-45.489-22.998-60.37,6.538 c-11.663,23.15-30.053,240.38-30.053,240.38s-116.399,6.083-179.721,78.408c-48.651,55.569-83.267,184.604,34.271,253.236 c62.717,36.617,126.148,15.205,173.489-22.562c0.074,4.782,0.257,9.507,0.558,14.161c0.105,8.437,1.522,38.583,15.667,68.345 c11.447,24.089,31.758,47.389,64.337,60.827c75.543,31.162,115.542-49.285,120.063-59.036c5.681-9.138,9.966-15.902,13.352-17.205 c16.246-6.245,1.136,68.787,23.359,92.09c10.423,10.928,21.995,17.685,36.871,21.713l0.022,0.105c0,0,58.673,15.722,47.285-53.603 C584.879,631.823,559.427,485.975,559.427,485.975 M174.622,489.512c-27.69-11.8-34.397-58.304-14.98-103.869 s57.604-72.938,85.295-61.137c27.69,11.799,34.396,58.302,14.98,103.868C240.5,473.938,202.313,501.311,174.622,489.512 M434.886,534.612c-9.425,54.978-28.432,97.601-42.453,95.195c-14.022-2.402-17.748-48.921-8.324-103.899 c9.424-54.979,28.43-97.6,42.453-95.196C440.582,433.114,444.31,479.634,434.886,534.612" />',
'<path fill="#BA68C8" d="M810.234,173.5c-32,0-36,40-36,40l-22.731,134.476c-7.867,52.959-10.769,96.902-17.985,96.902 c-6.292,0-4.437-58.559-11.543-120.587c-2.853-24.908-3.177-50.353-7.115-72.818c-2.012-39.12-24.647-64.888-71.435-54.832 c-43.194,9.284-84.315,23.753-82.357,62.918c0.033,0.661,0.101,1.313,0.153,1.968c-0.872,46.369,5.566,115.8,10.899,178.983 c6.818,80.762,15,151.313,37.859,150.445c28.957-1.098,27.255-51.455,30.632-108.624c1.699-28.766,1.701-63.421,2.832-86.452 c0.748-15.232,1.429-25.379,5.436-25.379c4.146,0,3.979,9.168,4.735,24c0.949,18.631,0.317,46.26,2.206,75.763 c6.414,100.237,8.797,265.471,59.132,265.471c31.282,0,38.282-90.233,63.804-219.173c8.414-42.503,61.479-303.061,61.479-303.061 S846.234,173.5,810.234,173.5" />',
'<path fill="#BA68C8" d="M130.429,266.789L149.325,187.906L126.98,187.906L108.234,266.789z" />',
'<path fill="#BA68C8" d="M132.829,175.534c2.498,1.851,5.298,2.774,8.398,2.774c2.1,0,4.073-0.398,5.923-1.2 c1.85-0.799,3.473-1.874,4.874-3.223c1.4-1.351,2.525-2.949,3.375-4.8c0.848-1.849,1.275-3.824,1.275-5.923 c0-3.799-1.251-6.622-3.749-8.474c-2.5-1.848-5.301-2.774-8.399-2.774c-2.099,0-4.075,0.4-5.924,1.2 c-1.85,0.801-3.474,1.874-4.874,3.224c-1.401,1.349-2.525,2.95-3.374,4.798c-0.85,1.852-1.274,3.825-1.274,5.924 C129.08,170.861,130.329,173.685,132.829,175.534" />',
'<path fill="#BA68C8" d="M157.422,257.116c1.599,3.55,4.298,6.351,8.099,8.398c3.797,2.048,9.147,3.075,16.045,3.075 c4.799,0,8.948-0.402,12.448-1.201c3.499-0.798,6.749-1.748,9.748-2.848l-1.65-17.097c-2.3,0.802-4.574,1.425-6.823,1.875 c-2.25,0.449-4.574,0.675-6.973,0.675c-2.801,0-5.001-0.399-6.599-1.2c-1.601-0.799-2.726-1.924-3.374-3.374 c-0.652-1.449-0.9-3.173-0.75-5.174c0.149-1.999,0.524-4.148,1.125-6.449l6.598-27.594h24.745l4.499-18.296h-24.895l5.698-23.245 l-23.244,3.599l-14.697,62.086c-1.199,5.1-1.9,9.951-2.1,14.547C155.121,249.493,155.821,253.568,157.422,257.116" />',
'<path fill="#BA68C8" d="M73.742,244.594L82.89,206.5h26.244l4.499-19H87.239l0.9-3.696c0.998-4.199,2.823-7.596,5.473-10.396 c2.649-2.797,6.723-4.148,12.223-4.148c1.999,0,3.824,0.201,5.473,0.55c1.65,0.351,3.374,0.789,5.174,1.288l7.949-17.391 c-1.702-0.799-3.951-1.545-6.749-2.246c-2.8-0.698-6.449-1.049-10.948-1.049c-11.798,0-20.946,2.903-27.443,8.699 c-6.5,5.8-10.999,14-13.497,24.596l-15.597,65.386c-0.802,3.501-1.825,7.273-3.074,11.322c-0.738,2.389-1.574,4.748-2.485,7.085 h22.388C69.382,261.051,71.62,253.516,73.742,244.594" />',
'</svg>'
].join(''),
ibahia360: [
'<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="551.333px" height="283.334px" viewBox="0 0 551.333 283.334" enable-background="new 0 0 551.333 283.334">',
'<path fill="#E31D38" d="M212.047,162.572c-3.805-4.497-10.535-5.059-15.032-1.254c-4.499,3.805-5.06,10.533-1.256,15.031 l23.857,28.203c-50.343-3.838-95.937-13.064-129.461-26.293c-32.934-12.996-51.822-28.887-51.822-43.601 c0-6.692,3.9-13.588,11.174-20.328c-6.71-5.16-11.392-10.604-13.771-16.252C23.299,109.334,17,121.613,17,134.659 c0,24.644,22.59,46.582,65.325,63.445c34.735,13.705,81.309,23.326,132.508,27.475l-21.273,23.578 c-3.947,4.373-3.601,11.119,0.773,15.064c2.039,1.842,4.595,2.748,7.142,2.748c2.913,0,5.816-1.188,7.922-3.521l38.813-43.014 c1.769-1.959,2.748-4.506,2.748-7.145v-0.816c0-2.521-0.894-4.963-2.523-6.889L212.047,162.572z"/>',
'<path fill="#E31D38" d="M502.791,121.393c3.187,4.442,4.876,8.898,4.876,13.266c0,13.602-16.544,28.531-45.389,40.96 c-31.736,13.676-76.756,23.682-126.817,28.188l-43.693-0.592c-0.051,0-0.1-0.002-0.148-0.002c-5.824,0-10.584,4.682-10.663,10.523 c-0.079,5.891,4.632,10.73,10.521,10.809c0,0,33.183,0.563,44.244,0.6c0.05,0,0.098,0.002,0.146,0.002 c0.316,0,0.633-0.014,0.947-0.041c52.476-4.68,100.031-15.295,133.907-29.893C518.889,174.453,529,150.826,529,134.659 c0-9.037-3.101-17.721-9.092-25.925C515.595,113.143,509.834,117.376,502.791,121.393z"/>',
'<defs><rect id="a" x="59.968" y="18.331" width="435.505" height="148.671"/></defs>',
'<clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath>',
'<path clip-path="url(#b)" fill="#E31D38" d="M370.313,66.288c7.257,0.181,13.288-5.545,13.47-12.79 c0.197-7.257-5.553-13.284-12.788-13.474c-7.257-0.183-13.284,5.547-13.465,12.788C357.34,60.063,363.069,66.103,370.313,66.288"/>',
'<path clip-rule="evenodd" clip-path="url(#b)" fill="#E31D38" d="M494.717,115.016c-2.825-3.705-5.873-5.235-9.484-5.059 c-4.327,0.208-3.57,0.228-10.063,0.951c-3.32,0.361-10.655,0.741-10.906,0.759c-0.657,0.047-3.962,0.064-5.473-0.139 c-2.396-0.308-5.658-1.469-7.841-2.625c-3.558-1.87-8.391-8.348-7.935-12.638c0.243-2.4,0.777-4.771,1.66-7.011 c0.911-2.288,2.675-5.405,3.356-7.781c1.563-5.434-9.523-11.793-22.227-11.436c-13.589,0.89-49.932,20.402-49.932,20.402 c0.258-2.825,1.511-10.061,1.573-12.902c0.14-6.501-19.088-7.964-25.111-3.646c-0.682,0.498-6.432,9.055-8.444,10.844 c0.173-2.657,0-5.317-0.871-7.881c-2.416-7.103-11.53-10.211-19.399-8.173c-3.364,0.872-5.114,2.645-6.275,2.753 c6.386-14.427,15.484-31.484,21.874-45.909c2.141-4.81-6.077-6.404-9.214-6.829c-3.604-0.491-14.628-1.228-16.645,3.308 c-9.057,20.461-31.196,72.302-32.537,73.446c-0.986-2.348-1.248-3.246-4.712-10.114c-4.739-5.313-17.928-13.609-49.297-2.418 c-5.409,2.4-11.058,5.063-16.084,8.598c-2.341-4.446-6.628-7.714-11.85-9.631c7.078-13.817,9.558-42.207-24.779-40.9 c-9.325,0.355-17.941,5.114-25.933,9.821c-8.165,4.799-16.903,13.123-23.921,19.455c-3.71,3.345-7.302,6.821-10.825,10.376 c0.947-4.51,2.225-9.1,3.922-13.34c2.239-5.562-3.746-8.794-8.39-9.994c-4.066-1.065-14.856-1.956-16.997,3.402 C86.02,69.45,79.494,77.822,71.414,84.692c-1.583,1.35-3.247,2.616-4.979,3.793c-0.582,0.398-2.673,1.563-2.877,1.653 c-4.587,2.308-4.896,7-0.458,10.091c5.153,3.557,13.143,4.422,18.926,1.984c0.769-0.334,1.524-0.711,2.277-1.107 c0.188,4.935,0.869,9.834,2.13,14.587c1.961,7.398,19.371,9.215,24.807,4.054c0.015-0.009,0.031-0.021,0.035-0.033 c0.048-0.037,0.136-0.115,0.218-0.214c0.016-0.012,0.018-0.017,0.029-0.032c1.734-1.906,10.137-13.104,13.656-17.222 c7.025-8.201,14.512-16.036,22.577-23.229c9.001-8.011,18.866-15.93,30.328-20.094c0.174-0.057,3.448-0.979,4.237-1.126 c2.166-0.402,4.859,0.072,4.957,2.75c0.1,2.637-1.846,5.193-3.364,7.174c-1.683,2.18-3.628,4.101-5.671,5.929 c-8.456,7.53-16.582,11.149-26.261,16.959c0.006,0.008,0.006,0.018,0.006,0.018c-6.043,3.591-7.282,4.113-10.757,6.722 c-10.169,7.627-1.553,17.837,11.973,12.962c9.995-4.279,18.379-11.16,27.26-15.839c2.92-1.534,13.993-6.674,10.717,1.004 c-12.923,30.372-58.25,45.584-80.824,54.747c-10.762,4.742-2.194,22.293,19.173,15.047c28.078-9.536,53.547-25.521,65.222-36.037 c4.388,5.946,13.933,9.233,28.826,6.981c16.87-2.269,26.831-8.687,37.758-21.449c5.347,6.354,12.323,19.243,14.518,19.543 c3.595,0.485,16.032,1.652,18.043-2.893c3.747-8.572,14.837-33.521,18.142-38.063c-0.347,0.467,5.256-2.954-3.929,29.311 c-1.676,5.893,6.822,5.646,15.385,4.692c0.107-0.008,0.215-0.032,0.305-0.032c3.644-0.452,8.061-5.231,11.341-8.309 c4.102-3.849,7.149-7.508,11.012-11.216c0.321,4.939,1.11,10.789,2.894,12.859c5.998,6.961,19.888,0.99,20.2,0.735 c0.608-0.325,1.369-2.338,2.145-5.183c4.955,6.74,13.742,8.564,21.831,8.992c9.415,0.492,18.579-2.589,26.565-7.348 c2.064-1.213,4.126-2.597,6.181-4.104c2.284,2.06,5.046,3.665,7.849,4.901c9.964,4.43,20.086,4.438,30.896,4.191 c5.854-0.131,10.031-0.074,15.865-0.756c2.671-0.304,7.08-0.908,9.623-1.799C497.119,117.849,495.534,116.058,494.717,115.016 M218.346,120.36c-2.125-11.173,18.684-23.139,30.753-27.322C249.701,97.551,244.286,117.902,218.346,120.36 M394.116,110.744 c0-0.012,0-0.018,0-0.037l0.012,0.043C394.128,110.744,394.116,110.75,394.116,110.744 M394.162,110.808l-0.046-0.188 c-0.309-9.595,14.801-19.919,28.214-23.266C424.019,99.599,407.089,112.139,394.162,110.808"/>',
'<defs><rect id="c" x="59.941" y="18.331" width="435.532" height="148.671"/></defs>',
'<clipPath id="d"><use xlink:href="#c" overflow="visible"/></clipPath>',
'<path clip-path="url(#d)" fill="#E31D38" d="M113.01,49.858c7.21,0.753,13.674-4.481,14.43-11.687 c0.749-7.217-4.484-13.671-11.697-14.433c-7.218-0.758-13.669,4.487-14.424,11.69C100.559,42.646,105.795,49.104,113.01,49.858"/>',
'<path fill="#231F20" d="M425.934,28.511c5.15,0.808,8.786,4.191,8.786,9.644c0,6.766-5.302,11.512-13.532,11.512 c-4.847,0-9.946-1.717-13.178-4.292l3.635-6.816c2.626,2.828,5.655,4.292,8.836,4.292c3.534,0,5.453-1.716,5.453-4.595 c0-2.979-1.969-4.443-5.503-4.443h-5.655v-4.797l7.877-8.18h-12.876V13.97h23.327v5.1l-8.836,9.189L425.934,28.511z"/>',
'<path fill="#231F20" d="M466.126,16.444l-3.434,6.261c-2.02-1.464-4.696-2.272-7.423-2.272c-5.654,0-8.381,3.585-8.28,9.392 c1.666-2.373,4.494-3.787,8.432-3.787c6.969,0,11.411,4.544,11.411,11.411c0,7.473-5.251,12.219-13.229,12.219 c-9.492,0-15.248-6.715-15.248-17.571c0-11.26,6.412-18.581,16.359-18.581C458.652,13.515,463.146,14.626,466.126,16.444z M447.948,37.549c0,2.625,1.667,4.948,5.302,4.948c3.231,0,5.251-1.818,5.251-5.1c0-3.03-1.868-4.797-5.1-4.797 C449.918,32.601,447.948,34.671,447.948,37.549z"/>',
'<path fill="#231F20" d="M501.571,31.541c0,11.563-5.604,17.975-15.603,17.975c-10.098,0-15.702-6.413-15.702-17.975 c0-11.512,5.604-17.924,15.702-17.924C495.967,13.616,501.571,20.029,501.571,31.541z M479.506,31.541 c0,8.079,1.919,11.411,6.463,11.411c4.443,0,6.413-3.333,6.413-11.411s-1.97-11.36-6.413-11.36 C481.425,20.18,479.506,23.462,479.506,31.541z"/>',
'<path fill="#231F20" d="M523.534,18.009c0,4.999-3.736,8.331-9.441,8.331c-5.655,0-9.392-3.333-9.392-8.331 c0-5.049,3.736-8.382,9.392-8.382C519.798,9.627,523.534,12.96,523.534,18.009z M510.71,18.06c0,2.323,1.363,3.837,3.383,3.837 s3.383-1.515,3.383-3.837s-1.363-3.837-3.383-3.837S510.71,15.737,510.71,18.06z"/>',
'</svg>'
].join('')
};
export default images;
export {
icons
};
Raw
menu.js
/* eslint-disable no-undef, no-alert */
import React from 'react';
import { Image, Linking } from 'react-native';
import { Icon } from 'native-base';
import { Actions } from 'react-native-router-flux';
import SvgUri from 'react-native-svg-uri';
import Analytics from '../services/analytics';
import config from './settings';
// Import svg icons data
import images, { icons } from './images';
// Function that mount SVG icon component
const getSVGIcon = props => <SvgUri {...props} />;
const getIcon = props => <Icon {...props} />;
const MENU_CONFIG = {
body: [
{
key: 'home',
text: 'Home',
icon: getIcon({
name: 'home',
style: {
color: '#50a9ff',
fontSize: 26,
marginRight: 18
}
}),
showInHome: false,
onPress: () => Actions.home()
}, {
key: 'radar',
text: 'Localize seu Trio',
icon: isHome => getIcon({
name: 'place',
style: {
color: '#ffad33',
fontSize: isHome ? 36 : 28,
marginRight: isHome ? 6 : 16
}
}),
block: true,
showInHome: true,
onPress: () => Actions.radarCircuitos()
}, {
key: 'schedule',
text: 'Programação Oficial',
icon: isHome => getIcon({
name: 'event',
style: {
color: '#ef5552',
fontSize: isHome ? 36 : 28,
marginRight: isHome ? 6 : 16
}
}),
block: true,
showInHome: true,
onPress: () => Actions.programacaoCircuitos()
}, {
key: 'carnaval',
text: 'Carnaval 360°',
icon: isHome => getSVGIcon({
height: isHome ? 34 : 32,
width: isHome ? 34 : 32,
svgXmlData: icons.ibahia360,
style: {
marginLeft: isHome ? 2 : 0,
marginRight: isHome ? 6 : 12
}
}),
block: false,
showInHome: true,
onPress: () => Actions.carnaval360({ videoType: 'videos_360' })
}, {
key: 'fitdance',
text: 'Coreografias',
icon: isHome => getSVGIcon({
height: isHome ? 34 : 24,
width: isHome ? 34 : 24,
svgXmlData: icons.fitdance,
style: {
marginLeft: isHome ? 2 : 4,
marginRight: isHome ? 6 : 16
}
}),
block: false,
showInHome: true,
onPress: () => Actions.fitdance({ videoType: 'videos_fitdance' })
}, {
key: 'news',
text: 'Notícias',
icon: (isHome) => {
const props = {
style: {
height: isHome ? 32 : 30,
marginLeft: isHome ? 2 : 0,
marginRight: isHome ? 8 : 14,
resizeMode: 'contain',
width: isHome ? 32 : 30
}
};
return (
<Image source={images.ibahia} {...props} />
);
},
block: false,
showInHome: true,
onPress: () => Actions.noticias()
}, {
key: 'phone',
text: 'Telefones úteis',
icon: isHome => getIcon({
name: 'call',
style: {
color: '#4caf50',
fontSize: isHome ? 36 : 28,
marginRight: isHome ? 6 : 16
}
}),
block: false,
showInHome: true,
onPress: () => Actions.telefones()
}, {
key: 'selfie',
text: 'Selfie',
icon: isHome => getIcon({
name: 'camera-alt',
style: {
color: '#6889ff',
fontSize: isHome ? 36 : 28,
marginRight: isHome ? 6 : 16
}
}),
block: true,
showInHome: true,
onPress: () => Actions.selfie()
}
],
middle: [
{
key: 'share',
text: 'Indique este aplicativo',
icon: getIcon({
name: 'share',
style: {
color: '#50a9ff',
fontSize: 22,
marginRight: 16
}
}),
active: false,
showInHome: false,
onPress: () => alert('Indique este aplicativo')
}, {
key: 'about',
text: 'Sobre o app',
showInHome: false,
onPress: () => Actions.sobre()
}, {
key: 'terms',
text: 'Termos de uso',
showInHome: false,
onPress: () => {
Analytics.trackEvent({
category: 'Menu',
action: 'visualizar',
label: 'Termos de uso'
});
Linking.openURL(config.termosURL);
}
}
]
};
export default MENU_CONFIG;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment