第一步从sketch中复制成SVG图片
<svg width="30px" height="25px" viewBox="0 0 30 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 45.1 (43504) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-503.000000, -144.000000)" fill="#03C3F4">
<g id="tab" transform="translate(0.000000, 125.000000)">
<g id="Group" transform="translate(48.000000, 17.000000)">
<path d="M461.156249,5 L461.851707,3.25833089 L461.851707,3.25833089 C462.155141,2.49842669 462.890859,2 463.709105,2 L463.709105,2 L476.332556,2 C477.150802,2 477.88652,2.49842669 478.189954,3.25833089 L478.885412,5 L483,5 C484.104569,5 485,5.8954305 485,7 L485,25 C485,26.1045695 484.104569,27 483,27 L457,27 C455.895431,27 455,26.1045695 455,25 L455,7 C455,5.8954305 455.895431,5 457,5 L457,5 L461.156249,5 Z M470,24 C474.418278,24 478,20.418278 478,16 C478,11.581722 474.418278,8 470,8 C465.581722,8 462,11.581722 462,16 C462,20.418278 465.581722,24 470,24 Z M470,22 C466.686292,22 464,19.3137085 464,16 C464,12.6862915 466.686292,10 470,10 C473.313708,10 476,12.6862915 476,16 C476,19.3137085 473.313708,22 470,22 Z" id="Combined-Shape"></path>
</g>
</g>
</g>
</g>
</svg>整理SVG
<svg width="30px" height="25px" viewBox="0 0 30 25">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-503.000000, -144.000000)" fill="#03C3F4">
<g id="tab" transform="translate(0.000000, 125.000000)">
<g id="Group" transform="translate(48.000000, 17.000000)">
<path d="M461.156249,5 L461.851707,3.25833089 L461.851707,3.25833089 C462.155141,2.49842669 462.890859,2 463.709105,2 L463.709105,2 L476.332556,2 C477.150802,2 477.88652,2.49842669 478.189954,3.25833089 L478.885412,5 L483,5 C484.104569,5 485,5.8954305 485,7 L485,25 C485,26.1045695 484.104569,27 483,27 L457,27 C455.895431,27 455,26.1045695 455,25 L455,7 C455,5.8954305 455.895431,5 457,5 L457,5 L461.156249,5 Z M470,24 C474.418278,24 478,20.418278 478,16 C478,11.581722 474.418278,8 470,8 C465.581722,8 462,11.581722 462,16 C462,20.418278 465.581722,24 470,24 Z M470,22 C466.686292,22 464,19.3137085 464,16 C464,12.6862915 466.686292,10 470,10 C473.313708,10 476,12.6862915 476,16 C476,19.3137085 473.313708,22 470,22 Z" id="Combined-Shape"></path>
</g>
</g>
</g>
</g>
</svg>需要改变背景色
1.删掉 fill =“none” + fill="#03C3F4"
2.使用fill的改变颜色 fill :#FFF
使用REM
定义外层SVG的宽高
@p: 10rem/375;
.download-icon svg{
margin-right: 5*@p;
fill: #FFF;
width: 16*@p;
height: 16*@p;
position: relative;
top: 3*@p;
}