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

{
 test: /\\.(png|jpe?g|gif|svg)(\\?.*)?$/,
 loader: \'url-loader\',
 options: {
  limit: 10000,          
  name: utils.assetsPath(\'img/[name].[hash:7].[ext]\')
 }
}

 {
 test: /\\.svg$/,
 loader: \'svg-sprite-loader\',
 include: [resolve(\'static/svg\')], // include => 只处理指定的文件夹下的文件
 options: {
  symbolId: \'icon-[name]\'
 }
 },
 {
 test: /\\.(png|jpe?g|gif|svg)(\\?.*)?$/,
 loader: \'url-loader\',
 exclude: [resolve(\'static/svg\')], // exclude => 不处理指定的文件夹下的文件
 options: {
  limit: 10000,
  name: utils.assetsPath(\'img/[name].[hash:7].[ext]\')
 }
 }

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

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

<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>

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

< >
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
 }
}
</ >

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