第一步从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,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; }
DEMO地址
@L_403_0@