如何在vue项目中优雅地使用SVG

冷不防 2022-01-29 07:17 388阅读 0赞

## 基础介绍 ##

*  本文旨在介绍如何在项目中配置和方便地使用svg图标。
 *  本文以vue项目为例，当然在react中的使用原理基本相似。
 *  svg图标可以直接通过img标签来使用，也可当做icon来使用。
 *  本文是参考了鑫旭大佬的文章：SVG Sprite技术介绍。

## 配置 ##

安装svg-sprite-loader。通过vue-cli脚手架创建的项目默认情况下会使用 url-loader 对svg进行处理，所以需要处理下：

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

cnpm i -D svg-sprite-loader。在static下新建svg文件夹，用来放置当做icon使用的svg，使用include,include和img做区分。然后修改webpack.base.conf.js配置,这样svg-sprite-loader只会处理我们指定的static/svg下的文件：

>       {
>         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]')
>         }
>       }
> 
>

## 使用 ##

在components下创建svg文件夹，创建Svg.vue文件:

>       <svg :class="svgClass" aria-hidden="true">
>         <use :xlink:href="iconName"></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)
> 
>

![1544188180656584.jpg][]

在main.js中执行：

>     import '@/utils/svgConfig'

到此我们就可以直接在项目中使用：

>     <svg-icon icon-class="users" />

## 优化 ##

*  虽然现在已经可以使用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中：

![1544188180178859.jpg][]

在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的路由信息，页面效果如下：

![1544188180206959.jpg][]

[1544188180656584.jpg]: https://www.itcodemonkey.com/data/upload/portal/20181207/1544188180656584.jpg
[1544188180178859.jpg]: https://www.itcodemonkey.com/data/upload/portal/20181207/1544188180178859.jpg
[1544188180206959.jpg]: https://www.itcodemonkey.com/data/upload/portal/20181207/1544188180206959.jpg