zoukankan      html  css  js  c++  java
  • Next 如何使用svg

    1.首先在components创建svg组件

    <template>
      <svg :class="svgClass" aria-hidden="true">
        <use :xlink:href="iconName"></use>
      </svg>
    </template>
    
    <script>
    export default {
      name: 'SvgIcon',
      props: {
        iconClass: {
          type: String,
          required: true,
          default: ''
        },
        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 scoped>
    .svg-icon {
       1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }
    </style>

    2. 在plugins插件目录文件夹下创建icon.js

    <template>
      <svg :class="svgClass" aria-hidden="true">
        <use :xlink:href="iconName"></use>
      </svg>
    </template>
    
    <script>
    export default {
      name: 'SvgIcon',
      props: {
        iconClass: {
          type: String,
          required: true,
          default: ''
        },
        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 scoped>
    .svg-icon {
       1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }
    </style>

     3.在nuxt.config.js 配置icon.js 插件

     

     4. assets 文件夹新建icons 存放svg图标文件  

    5.使用svg  

     

  • 相关阅读:
    SSD5_Optional Exercise 5分析
    SSD5_Optional Exercise 3分析
    SSD5_Optional Exercise 1 分析
    SSD5_Optional Exercise 4不会
    SSD5_ Exercise 2分析
    SSD5_Optional Exercise 2分析
    SSD5_Exercise 3分析
    SSD5_Recommended Exercise 4 分析
    2013蓝桥杯C语言本科组B
    hdu 1316 How Many Fibs?【JAVA大数】
  • 原文地址:https://www.cnblogs.com/jinmmm/p/14495578.html
Copyright © 2011-2022 走看看