第一步從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;
}

DEMO地址