# 使用SVG高清图标

CYB使用Svg Symbol方式在项目中使用SVG，这是一种全新的使用方式，是未来的主流，也是业界目前推荐的用法。Symbol具有如下特点：

支持多色图标，不再受单色限制。
通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
支持 ie9+,及现代浏览器。

# 开始使用

1、在src/static/目录下创建svg目录

将设计师导出的所有svg文件存放在src/static/svg/目录下

src
└── static
    └── svg
        ├── business.svg
        ├── camera.svg
        ├── filter.svg
        ├── graphics.svg
        └── machine.svg

2、在页面入口index.js文件中引入svg

import 'static/svg/business.svg'

或者自动导入所有图标

// requres and returns all modules that match
const requireAll = requireContext => requireContext.keys().map(requireContext)
// import all svg
const req = require.context('static/svg', true, /\.svg$/)
requireAll(req)

3、在html也模板文件中中直接使用SVG

<svg class="icon" aria-hidden="true">
  <use xlink:href="#business"></use>
</svg>

可在公共样式中添加如下样式：

.icon {
  /* 通过设置 font-size 来改变图标大小 */
  width: 1em;
  height: 1em;
  /* 图标和文字相邻时，垂直对齐 */
  vertical-align: -0.15em;
  /* 通过设置 color 来改变 SVG 的颜色/fill */
  fill: currentColor;
  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 normalize.css 中也包含这行 */
  overflow: hidden;
}

添加公共样式可以更好的控制图标属性。

//所有html页面都会被插入Symbol后的svg内容
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">

    <symbol id="business" viewBox="0 0 32 32">
      <title>business icon</title>
      <path d="M16 1.333q2.99 0 5.703 1.161t4.677 3.125 3.125 4.677 1.161 5.703-1.161 5.703-3.125 4.677-4.677 3.125-5.703 1.161-5.703-1.161-4.677-3.125-3.125-4.677-1.161-5.703 1.161-5.703 3.125-4.677 4.677-3.125 5.703-1.161zm0 2.667q-2.438 0-4.661.953t-3.828 2.557-2.557 3.828-.953 4.661.953 4.661 2.557 3.828 3.828 2.557 4.661.953 4.661-.953 3.828-2.557 2.557-3.828.953-4.661-.953-4.661-2.557-3.828-3.828-2.557-4.661-.953zm3.771 6.885q.552 0 .948.391t.396.943-.396.948l-2.833 2.833 2.833 2.823q.396.396.396.938 0 .552-.396.943t-.948.391-.938-.385l-2.833-2.823-2.823 2.823q-.385.385-.948.385-.552 0-.943-.385t-.391-.938q0-.563.385-.948l2.833-2.823-2.833-2.833q-.385-.385-.385-.938t.391-.948.943-.396.948.396l2.823 2.833 2.833-2.833q.396-.396.938-.396z"/>
    </symbol>

    <symbol id="camera" viewBox="0 0 32 32">
      <title>camera icon</title>
      <path d="M16 1.333q2.99 0 5.703 1.161t4.677 3.125 3.125 4.677 1.161 5.703-1.161 5.703-3.125 4.677-4.677 3.125-5.703 1.161-5.703-1.161-4.677-3.125-3.125-4.677-1.161-5.703 1.161-5.703 3.125-4.677 4.677-3.125 5.703-1.161zm0 2.667q-2.438 0-4.661.953t-3.828 2.557-2.557 3.828-.953 4.661.953 4.661 2.557 3.828 3.828 2.557 4.661.953 4.661-.953 3.828-2.557 2.557-3.828.953-4.661-.953-4.661-2.557-3.828-3.828-2.557-4.661-.953zm4.49 7.99q.552 0 .943.391t.391.943-.396.948l-5.656 5.656q-.385.385-.938.385-.563 0-.948-.385l-2.833-2.823q-.385-.385-.385-.948 0-.552.391-.943t.943-.391.948.396l1.885 1.885 4.708-4.719q.396-.396.948-.396z"/>
    </symbol>

    <!-- .... -->
</svg>
</body>

样式中通过'font-size'和'color'来改变svg图像的大小及颜色。

# 高级配置

//cyb.config.js
export default {
  svgSprite: {
    /**
     * 配置参考：
     * https://github.com/kisenka/svg-sprite-loader
     */
    options: {
      symbolId: 'icon-[name]',
      publicPath: 'static/svg' //图标路径（相对src目录）
    }
  }
}