Vuejs项目如何通过svg资源自定义图标?

Question

核心问题：

vuejs + vux + webpack的项目，如何实现添加阿里icon的svg图标到项目中?

项目情况：

• 目前我使用vue-svgicon插件 ，理由如下：

  • vux的Xicon是基于ionic的图标，且没有提供自定义图标的接口。意味着如果图标不够用，就要自己想办法了。（具体情况可参考vux的xicon文档 以及 vux github上我提的issue ）

  • 网上也有人推荐用vue-awesome，由于我之前没用过，不知道该组件是否能通过阿里icon的svg资源自定义图标。

• 目前 使用vue-svgicon能自定义图标了，但打包的时候提示svg.js资源找不到

  • vue-svgicon添加自定义svg资源的大致步骤如下：

    1. 将阿里icon的图标下载到项目指定文件夹（假设是src/assets/svg）

    2. 配置npm指令，将svg资源打包解析成js文件，并存放到指定文件（假设是src/assets/icons）

    3. 执行npm指令

       vsvg -s ./src/svg -t ./src/icons

    4. 在main.js中引入vue-svgicon

       import * as svgicon from 'vue-svgicon'
       Vue.use(svgicon, {
         tagName: 'svgicon'
       });

    5. 在组件中使用

       <p>
       <svgicon icon="vue" width="200" height="200" 
                color="#42b983 #35495e"></svgicon>
       </p>
       <script>
         import './icons/vue'
       </script>

  • 通过上述的步骤，dev环境下能显示图标。 但 通过build发布后页面则提示找不到模块的错误

    Uncaught Error: Cannot find module "./icons/vue"
    at Object.<anonymous> (app.3f3f33d319cb23613eea.js:1074)
    at n (bootstrap 9ef4db745f4ed12cc77b:54)
    at Object.<anonymous> (App.vue?5667:8)
    at n (bootstrap 9ef4db745f4ed12cc77b:54)
    at Object.<anonymous> (app.3f3f33d319cb23613eea.js:334)
    at n (bootstrap 9ef4db745f4ed12cc77b:54)
    at window.webpackJsonp (bootstrap 9ef4db745f4ed12cc77b:25)
    at app.3f3f33d319cb23613eea.js:1

关于问题的分析

• 一开始怀疑是路径问题（由于src/icons/svgname.js的文件不在assets资源文件夹内，所以引入不到），但如果我将icons文件移入assets文件夹内，则会出现babel-loader去解析svgname.js文件的问题。

Answer 1

我也是用的阿里的iconfont，我用的是symbol引用的方法，不知道你用的是什么
说一下我的方法，希望对你有帮助：

首先把iconfont的项目下载到本地，只需要用到里面的iconfont.js这个文件
main.js

import './assets/iconfont'//引入iconfont.js

封装一个icon.vue组件：
icon.vue

<template>
  <svg :class="iconStyle" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
  export default {
    name: 'icon',
    props: {
      iconClass: {
        type: String,
        required: true
      },
      iconStyle: String
    },
    computed: {
      iconName() {
        return `#icon-${this.iconClass}`
      }
    }
  }
</script>

组件中使用：
demo.vue

<template>
    <div class="container">
        <iconSvg icon-style="style" icon-class="name"></iconSvg>
        <!-- style为icon样式，name为icon名字 -->
    </div?
</template>

<script>
import icon from '../components/icon'
export default{
    components: {
        'icon':icon
    },
}
</script>

<style>
.style{
    width: 2em; 
    height: 2em;
    vertical-align: -0.15em;
    fill: #bfcbd9;
    overflow: hidden;
}
</style>

这样build之后也是好用的
如果想添加图标的话只需要每次替换iconfont.js就可以了

Answer 2

如果你是使用的iconfont.cn上的svg图标的话，那非常简单的。他有提供svg打包后的js，也就是iconfont.js，直接在你的main.js中引入一次就行，原理很简单，就是将svg添加到html中。

然后使用svg标签去引用

<svg>
  <use xlink:href="#icon-xxxx"></use> //对应的icon图标
</svg>

如果你不想使用他提供的js文件去加载svg也可以，你也可以把他提供的合并好的总svg加载到项目中(iconfont.svg)，标签内的使用方式一致，不过需要配合一个插件

import 'svg地址'

然后需要使用一下webpack的svg插件，可以看下这个: https://github.com/kisenka/sv... (原理跟上一步大同小异，也是把svg加载到html中，在后续使用xlink:href="#icon-xxxx"可以找到对应的图标)

Answer 3

推荐我从 VMware Clarity 移植的 clarity-icons-vue

文档：http://mario.studio/clarity-i...

计划添加直接使用 .svg 文件的功能

Answer 4

谢邀。

如果确定是build之后，在dist中没找到 src/icons/svgname.js 的话，
可以加一个webpack的插件：copy-webpack-plugin

webpack.config中，配置build，比如像这样：

var CopyWebpackPlugin = require('copy-webpack-plugin');
new CopyWebpackPlugin([
{
    from: path.join(__dirname, 'src/icons/svgname.js'),
    to: path.join(__dirname, 'dist/icons/svgname.js')
}
]);

Answer 5

我都是直接UI给我svg图片，我在项目中用<img src="./svg/hello.svg" class = "img" />,为什么非要搞那么麻烦呢