react-native-svg-uri&阿里Iconfont矢量图标使用记录

使用方法

1. svg-uri组件下载
   1). 引入
   2). 创建工具类
2. 阿里Iconfont图标下载
3. 添加svg标签
4. 使用

1.组件下载

yarn add react-native-svg-uri
------------------------------
npm install react-native-svg-uri --save
react-native link react-native-svg

1. 在项目中引入

import SvgUri from "react-native-svg-uri";

2. 创建工具类待会备用
   

2.阿里Iconfont下载

阿里矢量图标传送门

登陆注册完后要先创建项目哦

1. 选取喜爱的图标
2. 添加购物车~
3. 购物车中选择添加至项目
4. 然后就可以在自己的项目中看到添加进去的各种图标啦
5. 接下来点击下载至本地并解压出来，打开demo_index.html
   
6. 这时就可以看到刚才选择的各类图标了，在这里选择symbol
7. F12一下选取想要使用的矢量图标，找到包含整个图标的svg标签
   
8. 右键复制外部HTML标签，到这里算是完成一大半啦
   

3.添加svg标签

1. 在刚刚创建好的工具类中export一下(把需要用到的都导出，在引号中添加刚刚复制的标签）
   

/**
 *  triqueta
 */
export const triqueta = '<svg id="icon003-triqueta" viewBox="0 0 1024 1024" width="100%" height="100%"><path d="M683.108958 194.257127c-34.861328-69.493956-85.688402-130.72792-146.984177-177.063405a39.99163 39.99163 0 0 0-48.253682 0c-69.448628 52.500089-125.002173 123.873095-159.055839 202.962157-16.256258 37.519195-28.041529 77.137899-35.087968 117.727034l-0.020604 0.020604c-7.11031 40.852861-9.283992 81.97563-6.861006 121.765344a521.576563 521.576563 0 0 1 79.07464-31.708974c0.020604-51.241207 8.447485-100.708443 25.136418-147.705303a432.814101 432.814101 0 0 1 48.06825-95.990214c20.644829-30.94664 45.22495-59.130334 72.87295-83.525022 27.65006 24.394688 52.228121 52.580443 72.872949 83.525022a414.806535 414.806535 0 0 1 110.309731 35.891509 490.908072 490.908072 0 0 0-12.071662-25.898752z" fill="#80DFB5"></path><path d="M695.18268 220.155879a414.806535 414.806535 0 0 0-110.30973-35.891509 418.620266 418.620266 0 0 0-72.87295-6.366519c-24.847968 0-49.201449 2.183984-72.87295 6.366519a432.902696 432.902696 0 0 0-48.068249 95.990214c37.581006-14.422535 78.353513-22.334326 120.941199-22.334326 42.60829 0 83.360193 7.911791 120.941199 22.334326h0.020604c35.72668 13.701408 68.566793 33.316056 97.308845 57.626269l0.020604 0.020604c57.39963 48.562736 98.483252 115.831501 113.709327 192.351291 32.244668 27.485231 61.108282 58.759469 85.667799 92.920274 10.899316-173.577272-85.319598-330.100926-234.485698-403.017143z" fill="#FBE29F"></path><path d="M439.12705 184.26437a432.902696 432.902696 0 0 0-48.068249 95.990214 335.731895 335.731895 0 0 1 66.926744-18.017868 370.490205 370.490205 0 0 1 32.561964-60.154334 371.516266 371.516266 0 0 1 17.574889-24.143324 418.546093 418.546093 0 0 0-68.995348 6.325312z" fill="#F8D070"></path><path d="M512.473883 405.131074a7.273078 7.273078 0 0 0-0.947766 0c-122.622455 1.427831-239.506801 46.782584-331.526696 125.123735a338.379461 338.379461 0 0 0-6.490141 66.156169c0 17.018592 1.256821 33.728129 3.708652 50.066801 77.473738-94.21006 199.50693-159.616258 334.782068-161.322238 47.347123 0.597505 93.950455 8.900765 138.680918 24.662535 4.924266-26.619879 7.3967-53.899074 7.3967-81.670696v-0.185432a512.416193 512.416193 0 0 0-145.603735-22.830874z" fill="#80DFB5"></path><path d="M177.217932 646.477779c-2.451831-16.338672-3.708652-33.048209-3.708652-50.066801 0-22.622777 2.225191-44.751066 6.490141-66.156169 15.226076-76.519791 56.307638-143.790616 113.709327-192.351292l0.020604-0.020604c7.046439-40.589135 18.83171-80.207839 35.087968-117.727034C189.600708 288.207581 93.486873 431.297674 93.486873 596.410978c0 8.983179 0.288451 17.904547 0.844749 26.764104a415.476153 415.476153 0 0 0 24.332877 116.22297c17.904547 49.139638 44.77167 93.991662 78.641964 132.602849 35.990406 0.22664 70.497352-4.03831 102.892426-11.72346-64.878744-52.188974-110.186109-127.760998-122.980957-213.799662z" fill="#FBE29F"></path><path d="M1023.88668 880.942873c-9.869135-131.539702-72.07765-258.791791-179.886101-350.688064-32.714431-27.851976-68.21035-51.31332-106.848321-70.585948-1.710101 28.432998-5.74841 56.678503-11.991308 84.349167 45.517521 26.193384 87.050302 60.422181 121.621118 102.459751 22.760821 27.627396 42.954431 59.266318 58.553433 92.920273 17.245231 37.065915 29.174728 76.478584 35.232193 116.552628-36.818672 10.404829-75.283573 15.823581-113.874157 16.050221a420.878423 420.878423 0 0 1-84.101923 73.491059c81.709843 13.491252 171.795058 6.533408 255.130527-23.982616 16.810495-6.160483 27.503775-22.725795 26.164539-40.566471z" fill="#80DFB5"></path><path d="M595.959759 412.933666a389.371364 389.371364 0 0 1-5.167389 80.459203 435.175276 435.175276 0 0 1 59.886487 16.421087c4.924266-26.617819 7.3967-53.897014 7.3967-81.670696v-0.185433a513.392805 513.392805 0 0 0-62.115798-15.024161zM737.152258 459.668861c-1.710101 28.432998-5.74841 56.678503-11.991308 84.349167a453.963718 453.963718 0 0 1 54.568692 36.913449 586.173038 586.173038 0 0 0 16.449931-86.877232 528.618881 528.618881 0 0 0-59.027315-34.385384z" fill="#36D39A"></path><path d="M730.291252 337.903517l-0.020604-0.020604c-28.742052-24.312274-61.582165-43.926922-97.308845-57.626269 16.66833 46.996861 25.095211 96.464097 25.115815 147.705304v0.185432c0 27.773682-2.472435 55.050817-7.3967 81.670696-17.304982 93.956636-65.451525 180.261087-136.682367 243.928338 21.864563 16.470535 45.552547 30.518085 68.698656 45.317666l0.032966-0.018543c95.021843-92.322769 146.897642-214.294149 154.422085-339.376676 2.422986-39.773231 0.253425-80.896-6.861006-121.765344z" fill="#80DFB5"></path><path d="M629.747638 913.741779a338.455694 338.455694 0 0 0 94.053473-53.464338c-48.457658-11.455614-94.527356-31.193883-137.525055-58.924298-63.345835-40.854922-119.680258-67.211074-173.851299-175.190535-18.584467-37.045312-31.667767-75.963493-39.105675-116.346592-25.604121 8.888402-50.80235 20.572716-74.480032 34.202012 9.230423 41.001207 23.343903 80.743533 42.051992 118.015485 25.589698 51.012507 59.769046 97.556089 100.378785 137.012024 45.505159 44.211252 102.51538 73.925795 163.477376 103.372491z" fill="#80DFB5"></path><path d="M365.922382 427.959887a452.136177 452.136177 0 0 1 4.751195-65.523638 584.47736 584.47736 0 0 0-83.426124 28.946029c-1.617384 22.991581-1.767791 45.85336-0.401771 68.286583a521.473545 521.473545 0 0 1 79.0767-31.708974zM373.319082 509.816016c-25.604121 8.888402-50.80235 20.572716-74.480032 34.202012a521.794962 521.794962 0 0 0 17.844797 61.404974 388.411235 388.411235 0 0 1 72.285747-35.378479 431.996137 431.996137 0 0 1-15.650512-60.228507z" fill="#36D39A"></path><path d="M846.782068 646.477779c-12.794849 86.038664-58.100153 161.612748-122.980957 213.799662a338.352676 338.352676 0 0 1-94.053473 53.464338c-36.69505 13.680805-76.354962 21.139316-117.747638 21.139316s-81.052588-7.458511-117.747638-21.139316c-36.86194 15.007678-74.273996 25.379541-112.843976 31.750181 66.156169 43.865111 145.459509 69.411541 230.591614 69.411541 122.288676 0 235.938254-53.066688 314.693537-142.90466 33.872354-38.611187 60.737416-83.463211 78.641964-132.602849-15.601062-33.658076-35.794672-65.294938-58.553433-92.918213z" fill="#FBE29F"></path><path d="M872.84771 808.189425a416.362109 416.362109 0 0 0 32.489851-68.791373c-15.603123-33.660137-35.796732-65.296998-58.553432-92.922334a335.459928 335.459928 0 0 1-19.559018 73.223212c12.432225 17.828314 23.444861 36.812491 32.37447 56.074816a372.925553 372.925553 0 0 1 13.248129 32.415679zM300.198889 860.277441a341.478245 341.478245 0 0 1-57.683959-59.284862 372.115831 372.115831 0 0 1-61.013505 5.087035l-2.375598-0.008242a369.212781 369.212781 0 0 1-30.007115-1.396925 420.035734 420.035734 0 0 0 48.189811 67.326454 433.747445 433.747445 0 0 0 102.890366-11.72346z" fill="#F8D070"></path><path d="M441.294551 799.068201c-44.641867 28.544258-88.131992 48.688419-141.095662 61.20924a433.827799 433.827799 0 0 1-102.892426 11.72346c-38.590584-0.22664-77.055485-5.645392-113.874157-16.050221 6.057465-40.074044 17.986962-79.486712 35.232193-116.552628a415.476153 415.476153 0 0 1-24.332877-116.22297c-8.921368 12.40338-17.265835 25.177626-25.012797 38.302133C29.801078 728.436926 5.86173 804.320064 0.11332 880.942873c-1.339235 17.842736 9.354044 34.408048 26.1666 40.568531 129.271243 47.322398 273.533682 38.596765 392.974937-19.093376 28.884217-13.950712 65.500974-32.603171 92.747203-49.360096-25.332153-15.580459-49.102551-33.002881-70.707509-53.989731z" fill="#80DFB5"></path><path d="M619.777545 749.409352a1976.111903 1976.111903 0 0 0-21.015694-13.316121c-14.834608-9.312837-28.507171-17.894245-41.402978-27.233867a426.911163 426.911163 0 0 1-43.358261 44.88499c21.864563 16.470535 45.552547 30.518085 68.698656 45.317666l0.032965-0.018543a509.282382 509.282382 0 0 0 42.198278-46.389054 385.164105 385.164105 0 0 1-5.152966-3.245071zM512 853.057932c-25.330093-15.580459-49.100491-33.002881-70.705449-53.989731-18.60095 11.89241-37.010286 22.307541-55.9821 31.340169a570.353577 570.353577 0 0 0 12.883444 12.965859c16.515863 16.046101 34.228797 30.353256 52.67522 43.360322 21.186704-10.792177 43.187252-22.64132 61.128885-33.676619z" fill="#36D39A"></path></svg>';

2. 之后就可以放到项目中使用啦

4.使用

1. 首先引入刚刚的工具类，大括号中填入导出的变量名

import { icontest1,triqueta } from "../res/fonts/iconSg";

2. 使用方法

<SvgUri svgXmlData={标签名} width="XX" height="XX" />
                           (宽)         (高)     

3. 效果
   

--示例
<View style={{alignItems:"center",marginTop:10}}>
   <SvgUri svgXmlData={triqueta} width="50" height="50" />
</View>