在vue项目中优雅的使用SVG的方法实例详解

{
 test: /\.(png|jpe"htmlcode">

 {
 test: /\.svg$/,
 loader: 'svg-sprite-loader',
 include: [resolve('static/svg')], // include => 只处理指定的文件夹下的文件
 options: {
  symbolId: 'icon-[name]'
 }
 },
 {
 test: /\.(png|jpe"htmlcode">

 <svg :class="svgClass" aria-hidden="true">
 <use :xlink:href="iconName" rel="external nofollow" ></use>
 </svg>


在utils文件夹下创建svgConfig文件夹，创建index.js文件，全局注册svg-icon组件。
Vue.component('svg-icon', SvgIcon)
使用require.context自动导入文件，而不需要import一个个去引用:


const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./../../../static/svg/', true, /\.svg$/)
requireAll(req)



4. 在main.js在执行：
import '@/utils/svgConfig'
到此我们就可以直接在项目中使用：


<svg-icon icon-class="users" />
4、优化
虽然现在已经可以使用svg-icon,当是还无法直观的分辨svg，当svg文件比较多的时候，如果只能一个个的去查找将费时费力。为方便我们查找和使用svg，可以新建一个svg的列表页。
在pages文件下新建SvgList.vue文件，iconsMap为导入的svg文件数组，handleClipboard方法为点击复制的方法，通过安装clipboard实现（cnpm i -S clipboard）：


<div class="icons-wrapper">
 <div v-for="item in iconsMap" :key="item" @click="handleClipboard(generateIconCode(item), $event)">
 <el-tooltip placement="top">
  <div slot="content">
  {{generateIconCode(item)}}
  </div>
  <div class="icon-item">
  <div>
   <span class="svg-wrap" @click.stop>
   <svg-icon :icon-class="item" />
   </span>
  </div>
  <span>{{item}}</span>
  </div>
 </el-tooltip>
 </div>
</div>


获取iconsMap，在utils文件夹下创建svgConfig文件夹，generateIconsView.js文件， 当然如果你使用了vuex，也可以保存在vuex中的state中：


const data = {
 state: {
 iconsMap: []
 },
 generate (iconsMap) {
 this.state.iconsMap = iconsMap
 }
}
export default data


将数据保存在iconsMap中：

在SvgList.vue中使用：


<script>
import icons from '@/utils/svgConfig/generateIconsView'
export default {
 name: 'icons',
 data () {
 return {
  iconsMap: []
 }
 },
 mounted () {
 const iconsMap = icons.state.iconsMap.map((i) => {
  return i.default.id.split('-')[1]
 })
 this.iconsMap = iconsMap
 }
}
</script>


添加点击复制的提示和方法（cnpm i -S clipboard），在SvgList.vue中使用：


 methods: {
 generateIconCode (symbol) {
  return `<svg-icon icon-class="${symbol}" />`
 },
 handleClipboard (text, event) {
  clipboard(text, event)
 }
}


在路由添加SvgList.vue的路由信息，页面效果如下：



总结
以上所述是小编给大家介绍的在vue项目中优雅的使用SVG的方法实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！