欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue-cli3使用svg

程序员文章站 2022-11-07 21:54:45
执行命令安装插件 在 中,添加配置 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文件夹,文件夹下包含svgindex.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文件命名一致。