zoukankan      html  css  js  c++  java
  • svg组件封装

    svg图标优点

    文件体积小,能够被大量的压缩

    图片可无限放大而不失真(矢量图的基本特征)

    在视网膜显示屏上效果极佳

    能够实现互动和滤镜效果

    svg图标使用

    1.安装相应的npm包:

    yarn add svg-sprite-loader svgo --dev 

    2.src文件夹下新建一个icons文件夹。里面存放svg格式的图标。

    index.js实现组件全部注册。

    1 import Vue from 'vue';
    2 import SvgIcon from '@/components/SvgIcon.vue'; // svg组件
    3 
    4 // register globally
    5 Vue.component('svg-icon', SvgIcon);
    6 
    7 const requireAll = requireContext => requireContext.keys().map(requireContext);
    8 const req = require.context('./svg', false, /.svg$/);
    9 requireAll(req);

    SvgIcon.vue组件:

     1 <template>
     2     <svg :class="svgClass" aria-hidden="true">
     3         <use :xlink:href="iconName"></use>
     4     </svg>
     5 </template>
     6 
     7 <script>
     8 export default {
     9   name: 'svg-icon',
    10   props: {
    11     iconClass: {
    12       type: String,
    13       required: true
    14     },
    15     className: {
    16       type: String
    17     }
    18   },
    19   computed: {
    20     iconName() {
    21       return `#icon-${this.iconClass}`;
    22     },
    23     svgClass() {
    24       if (this.className) {
    25         return `svg-icon ${this.className}`;
    26       }
    27       return 'svg-icon';
    28     }
    29   }
    30 };
    31 </script>
    32 
    33 <style scoped>
    34 .svg-icon {
    35      20px;
    36     height: 20px;
    37     vertical-align: -0.15em;
    38     fill: currentColor;
    39     overflow: hidden;
    40 }
    41 </style>

    3.在vue.config.js里set svg-sprite-loader

    4.别忘了在main.js中引入:

    import Vue from 'vue';
    import './icons';
    
    import router from './router';
    import store from './store';
    
    import './assets/styles/index.scss';
    
    Vue.config.productionTip = false;
    
    new Vue({
      router,
      store,
      template: '<router-view></router-view>',
    }).$mount('#app');

    5.然后,就可以使用了

    <el-form-item prop="username">
        <svg-icon icon-class="user" class="icon-svg" />
        <el-input placeholder="请输入邮箱" type="text" v-model="loginForm.username" />
    </el-form-item>
  • 相关阅读:
    在非控制台程序中打印出printf
    如何将动态链接库(C++ DLL)中的printf显示在其被调用的程序控制台上
    Android NDK Build 参数
    查找包含××××××字符的文件名
    Ubuntu安装Fcitx(小企鹅五笔输入法)
    查询所有表的记录数SQLServer
    查询某个表或者所有表的字段说明 SQLServer
    安卓64位Ubuntu的32位包安装
    gen already exists but is not a source folder ZT
    mysql中查看datadir目录
  • 原文地址:https://www.cnblogs.com/guwufeiyang/p/12956341.html
Copyright © 2011-2022 走看看