SVG---------SVG sprite 使用示例

SGV_sprite 使用方法

          生成svg_sprite网站: https://icomoon.io/app

          使用示例:

                    

          

icon-untitled

icon-home

icon-untitled2

icon-untitled3

icon-untitled4

icon-untitled5

icon-untitled6

icon-untitled7

icon-untitled8

icon-untitled9

icon-untitled10

icon-untitled11

icon-untitled12

icon-untitled13

icon-untitled14

icon-untitled15

icon-untitled16

icon-untitled17

icon-untitled18

icon-untitled19

icon-untitled20

icon-untitled21

icon-untitled22

icon-untitled23

使用案例参照本页面源代码

1. 先导入<svg>整合code,然后在需要的地方直接<use xlink:href="#iconXXXX">引用相对的图标  .
   
2. 注意设置viewBox,该属性可以控制图标显示方式,通常设置为 viewBox="0 0 icon.width icon.height",显示为图标大小并且位置居中对齐
3. 通过给svg元素在css 内设置 fill和fill-opacity控制显示颜色和透明度
4. 通过给svg元素在css内设置 stroke和其相关属性可以控制icon的描边显示(这个功能在icon-font是通过text-stroke实现,表现效果略差)