当前位置： 移动技术网 > IT编程>网页制作>Html5 > vue-cli3使用svg

vue-cli3使用svg

2019年11月08日  | 移动技术网IT编程  | 我要评论
执行命令安装插件 在 中，添加配置 module.exports = { ... chainWebpack: config = { // 一个规则里的 基础Loader // svg是个基础loader const svgRule = config.module.rule("svg"); // 清除 ...
  • 执行命令安装插件 npm install svg-sprite-loader --save-dev

  • 在vue.config.js中，添加配置

      module.exports = {
      ...
      chainwebpack: config => {
          // 一个规则里的 基础loader
          // svg是个基础loader
          const svgrule = config.module.rule("svg");

          // 清除已有的所有 loader。
          // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
          svgrule.uses.clear();

          // 添加要替换的 loader
          svgrule
          .use("svg-sprite-loader")
          .loader("svg-sprite-loader")
          .options({
              symbolid: "icon-[name]"
          });
      },
      ...
  }

  • 创建vue公共svg组件svgicon.vue

      <template>
  <svg :class="svgclass" aria-hidden="true">
      <use :xlink:href="iconname" />
  </svg>
  </template>
  <script>
  export default {
  name: "svgicon",

  props: {
      iconclass: {
          type: string,
          required: true,
      },
      classname: {
          type: string,
          default: '',
      },
  },

  computed: {
      iconname () {
          return    `#icon-${this.iconclass}`
      },
      svgclass () {
          if(this.classname) {
              return `svg-icon${this.classname}`
          }else {
              return 'svg-icon'
          }
      },
  },
  }
  </script>
  <style lang="scss" scoped>
  .svg-icon {
      width: 1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentcolor;
      overflow: hidden;
  }
  </style>

  • 新建svg-icon文件夹，文件夹下包含svg和index.js，分别为svg原文件和引入代码。index.js内容为：

      import vue from 'vue'
  import svgicon from '@/components/svgicon'

  vue.component('svg-icon', svgicon)   // 挂载在全局

  const requireall = requirecontext => requirecontext.keys().map(requirecontext)
  const req = require.context('./svg', false, /\.svg$/)
  requireall(req);

  • 使用 <svg-icon icon-class="svgname" /> // svgname必须与/svg-icon/svg/下的svg文件命名一致。

您可能感兴趣的文章:

如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网