svg sprite svg精灵图 实践使用

1. 将ui制作的svg放到一个文件夹里面
2. 准备 vscode插件SVG Sprite Viewer And Generator
3. 生成精灵图

4. 预览精灵图

5. 在项目中安装webpack 的 svg插件svg-sprite-loader

6. 代码中使用

7. 封装相应的 base-icon 组件

  <!-- 基础图标, svg使用 -->
  <div @click="$emit('click')" class="base-icon" :style="{ cursor: pointer ? 'pointer' : 'default' }">
      <svg :width="width || (map[id] ? map[id].width : 20)" :height="height || (map[id] ? map[id].height : '20')">
          <use :width="width || (map[id] ? map[id].width : 20)" :height="height || (map[id] ? map[id].height : '20')" :xlink:href="'#_sprite_' + id" />
      </svg>
  </div>

8. 最终使用

<base-icon id="excel" width="20" height="20"></base-icon>