SVG 多色图标
页面在使用图标中，一般推荐两种方案：1. 字体图标； 2. SVG 图标。这里我们讲解如何使用 SVG 图标。字体图标的缺陷是颜色单一无法创建多色图标，SVG 的优势显而易见。
首先，我们先用工具导出合并后的图标，并放到symbol元素中。下面的范例中我们有三个图标
<svg>
<symbol id="icon-jieshao" viewBox="0 0 1024 1024">
<path d="M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m139.946667 281.493333a87.786667 87.786667 0 1 1-87.786667 87.786667 87.786667 87.786667 0 0 1 87.786667-87.786667zM725.333333 672a81.066667 81.066667 0 0 1-80.96 80.96H397.013333A81.066667 81.066667 0 0 1 316.053333 672V381.226667a81.066667 81.066667 0 0 1 80.96-80.96h116.8a10.666667 10.666667 0 0 1 0 21.333333H397.013333a59.733333 59.733333 0 0 0-59.626666 59.626667V672a59.733333 59.733333 0 0 0 59.626666 59.626667h247.786667A59.733333 59.733333 0 0 0 704 672v-87.68a10.666667 10.666667 0 0 1 21.333333 0z m10.666667-136.64H561.813333a4.373333 4.373333 0 0 1-3.946666-6.293333l33.066666-70.4a8.853333 8.853333 0 0 1 12.586667-3.84 90.24 90.24 0 0 0 92.16 2.88 8.746667 8.746667 0 0 1 12.053333 4.053333l32 67.413333a4.373333 4.373333 0 0 1-3.733333 6.186667z" fill="#3299C9" ></path>
</symbol>
<symbol id="icon-gengduo" viewBox="0 0 1024 1024"><path d="M564.586667 588.16l128 0 0 128-128 0 0-128Z" fill="#7DC932" ></path><path d="M320.533333 362.88l128 0 0 128-128 0 0-128Z" fill="#7DC932" ></path><path d="M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m-42.133333 705.493333a32 32 0 0 1-32 32h-106.666667a32 32 0 0 1-32-32v-106.666666a32 32 0 0 1 32-32h106.666667a32 32 0 0 1 32 32z m0-225.386666a32 32 0 0 1-32 32h-106.666667a32 32 0 0 1-32-32V373.333333a32 32 0 0 1 32-32h106.666667a32 32 0 0 1 32 32z m244.053333 225.386666a32 32 0 0 1-32 32h-106.666667a32 32 0 0 1-32-32v-106.666666a32 32 0 0 1 32-32h106.666667a32 32 0 0 1 32 32z m5.12-263.573333l-75.306667 75.413333a21.333333 21.333333 0 0 1-30.186666 0l-75.413334-75.413333a21.333333 21.333333 0 0 1 0-30.186667l75.413334-75.413333a21.333333 21.333333 0 0 1 30.186666 0l75.413334 75.413333a21.333333 21.333333 0 0 1 0 30.186667z" fill="#7DC932" ></path><path d="M320.533333 588.16l128 0 0 128-128 0 0-128Z" fill="#7DC932" ></path>
</symbol>
<symbol id="icon-jiaoliu" viewBox="0 0 1024 1024"><path d="M706.666667 496.64c0-83.626667-96.64-151.68-215.466667-151.68s-215.466667 68.053333-215.466667 151.68c0 40.96 23.04 79.466667 64.96 108.373333a10.666667 10.666667 0 0 1 2.986667 14.506667l-39.146667 61.44L437.333333 644.48a10.666667 10.666667 0 0 1 4.586667 0 302.826667 302.826667 0 0 0 49.173333 3.946667c118.933333-0.106667 215.573333-68.16 215.573334-151.786667zM373.333333 529.066667a34.24 34.24 0 1 1 34.24-34.24A34.24 34.24 0 0 1 373.333333 529.066667z m232-68.373334a34.24 34.24 0 1 1-34.24 34.24 34.24 34.24 0 0 1 34.026667-34.24zM456.96 494.933333a34.24 34.24 0 1 1 34.24 34.24 34.24 34.24 0 0 1-34.24-34.24z" fill="#3280C9" ></path><path d="M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0zM283.413333 708.8a10.666667 10.666667 0 0 1-2.773333 0 10.666667 10.666667 0 0 1-9.066667-15.466667L320 616.426667c-42.666667-32-65.813333-74.666667-65.813333-119.893334 0-95.36 106.666667-173.013333 236.8-173.013333s236.8 77.653333 236.8 173.013333-106.666667 173.013333-236.8 173.013334a324.053333 324.053333 0 0 1-50.346667-3.946667z m473.92 2.133333a10.666667 10.666667 0 0 1-12.16 15.146667L650.666667 701.973333a86.506667 86.506667 0 0 0-10.026667 4.693334 211.093333 211.093333 0 0 1-97.706667 24.533333h-17.493333a350.72 350.72 0 0 1-54.186667-4.48 10.666667 10.666667 0 0 1 3.2-21.333333 317.44 317.44 0 0 0 67.52 3.84 189.44 189.44 0 0 0 88.853334-22.186667 62.506667 62.506667 0 0 1 18.133333-7.253333 10.666667 10.666667 0 0 1 4.373333 0l74.666667 18.986666L704 654.4a10.666667 10.666667 0 0 1 1.386667-11.733333c25.066667-29.546667 35.52-41.706667 42.666666-81.6a10.666667 10.666667 0 0 1 21.333334 3.733333c-7.68 42.666667-19.626667 58.88-42.666667 86.186667z" fill="#3280C9" ></path>
</symbol>
</svg>
然后我们可以在使用图标的地方使用<use>标签来使用
<body>
<svg>
<symbol id="icon-jieshao" viewBox="0 0 1024 1024">
<path d="M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m139.946667 281.493333a87.786667 87.786667 0 1 1-87.786667 87.786667 87.786667 87.786667 0 0 1 87.786667-87.786667zM725.333333 672a81.066667 81.066667 0 0 1-80.96 80.96H397.013333A81.066667 81.066667 0 0 1 316.053333 672V381.226667a81.066667 81.066667 0 0 1 80.96-80.96h116.8a10.666667 10.666667 0 0 1 0 21.333333H397.013333a59.733333 59.733333 0 0 0-59.626666 59.626667V672a59.733333 59.733333 0 0 0 59.626666 59.626667h247.786667A59.733333 59.733333 0 0 0 704 672v-87.68a10.666667 10.666667 0 0 1 21.333333 0z m10.666667-136.64H561.813333a4.373333 4.373333 0 0 1-3.946666-6.293333l33.066666-70.4a8.853333 8.853333 0 0 1 12.586667-3.84 90.24 90.24 0 0 0 92.16 2.88 8.746667 8.746667 0 0 1 12.053333 4.053333l32 67.413333a4.373333 4.373333 0 0 1-3.733333 6.186667z" fill="#3299C9" ></path>
</symbol>
<symbol id="icon-gengduo" viewBox="0 0 1024 1024"><path d="M564.586667 588.16l128 0 0 128-128 0 0-128Z" fill="#7DC932" ></path><path d="M320.533333 362.88l128 0 0 128-128 0 0-128Z" fill="#7DC932" ></path><path d="M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m-42.133333 705.493333a32 32 0 0 1-32 32h-106.666667a32 32 0 0 1-32-32v-106.666666a32 32 0 0 1 32-32h106.666667a32 32 0 0 1 32 32z m0-225.386666a32 32 0 0 1-32 32h-106.666667a32 32 0 0 1-32-32V373.333333a32 32 0 0 1 32-32h106.666667a32 32 0 0 1 32 32z m244.053333 225.386666a32 32 0 0 1-32 32h-106.666667a32 32 0 0 1-32-32v-106.666666a32 32 0 0 1 32-32h106.666667a32 32 0 0 1 32 32z m5.12-263.573333l-75.306667 75.413333a21.333333 21.333333 0 0 1-30.186666 0l-75.413334-75.413333a21.333333 21.333333 0 0 1 0-30.186667l75.413334-75.413333a21.333333 21.333333 0 0 1 30.186666 0l75.413334 75.413333a21.333333 21.333333 0 0 1 0 30.186667z" fill="#7DC932" ></path><path d="M320.533333 588.16l128 0 0 128-128 0 0-128Z" fill="#7DC932" ></path>
</symbol>
<symbol id="icon-jiaoliu" viewBox="0 0 1024 1024"><path d="M706.666667 496.64c0-83.626667-96.64-151.68-215.466667-151.68s-215.466667 68.053333-215.466667 151.68c0 40.96 23.04 79.466667 64.96 108.373333a10.666667 10.666667 0 0 1 2.986667 14.506667l-39.146667 61.44L437.333333 644.48a10.666667 10.666667 0 0 1 4.586667 0 302.826667 302.826667 0 0 0 49.173333 3.946667c118.933333-0.106667 215.573333-68.16 215.573334-151.786667zM373.333333 529.066667a34.24 34.24 0 1 1 34.24-34.24A34.24 34.24 0 0 1 373.333333 529.066667z m232-68.373334a34.24 34.24 0 1 1-34.24 34.24 34.24 34.24 0 0 1 34.026667-34.24zM456.96 494.933333a34.24 34.24 0 1 1 34.24 34.24 34.24 34.24 0 0 1-34.24-34.24z" fill="#3280C9" ></path><path d="M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0zM283.413333 708.8a10.666667 10.666667 0 0 1-2.773333 0 10.666667 10.666667 0 0 1-9.066667-15.466667L320 616.426667c-42.666667-32-65.813333-74.666667-65.813333-119.893334 0-95.36 106.666667-173.013333 236.8-173.013333s236.8 77.653333 236.8 173.013333-106.666667 173.013333-236.8 173.013334a324.053333 324.053333 0 0 1-50.346667-3.946667z m473.92 2.133333a10.666667 10.666667 0 0 1-12.16 15.146667L650.666667 701.973333a86.506667 86.506667 0 0 0-10.026667 4.693334 211.093333 211.093333 0 0 1-97.706667 24.533333h-17.493333a350.72 350.72 0 0 1-54.186667-4.48 10.666667 10.666667 0 0 1 3.2-21.333333 317.44 317.44 0 0 0 67.52 3.84 189.44 189.44 0 0 0 88.853334-22.186667 62.506667 62.506667 0 0 1 18.133333-7.253333 10.666667 10.666667 0 0 1 4.373333 0l74.666667 18.986666L704 654.4a10.666667 10.666667 0 0 1 1.386667-11.733333c25.066667-29.546667 35.52-41.706667 42.666666-81.6a10.666667 10.666667 0 0 1 21.333334 3.733333c-7.68 42.666667-19.626667 58.88-42.666667 86.186667z" fill="#3280C9" ></path>
</symbol>
</svg>
<h1>产品介绍</h1>
<ul>
<li><svg><use xlink:href="#icon-jieshao"/><svg></li>
<li><svg><use xlink:href="#icon-jiaoliu"/><svg></li>
<li><svg><use xlink:href="#icon-gengduo"/><svg></li>
</ul>
</body>
那如何方便的创建 svg 合并后的图标文件呢？下面方法可快速实现
第一步： 打开 http://www.iconfont.cn
第二步： 搜索自己感兴趣的图标，加入购物车
第三步： 打开购物车，进入项目页面
第四步： 选择 Symbol， 生成链接，打开生成的 at.alicdn.com/t/xxxxx.js
第五步： 拷贝 <svg>xxxxx</svg>里面的内容，即可