zoukankan      html  css  js  c++  java
  • vue+svg字体图标

    项目结构

    1、webpack.base.conf.js配置loader

    npm i svg-sprite-loader -D
    {
        test: /.(png|jpe?g|gif|svg)(?.*)?$/,
        loader: 'url-loader',
        exclude: [resolve('src/svgicons')],
        options: {
            limit: 10000,
            name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
    },
    {
        test: /.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/svgicons')],
        options: {
            symbolId: 'icon-[name]'
        }
    }

    2、封装组件

    <template>
        <svg class="svg-icon" aria-hidden="true">
            <use :xlink:href="'#icon-'+iconName"/>
        </svg>
    </template>
    
    <script>
        export default {
            props: {
                iconName: {
                    type: String,
                    required: true
                }
            }
        }
    </script>
    
    <style scoped>
        .svg-icon {
             1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor !important;
            overflow: hidden;
        }
    </style>

    3、引入svg

    import Vue from 'vue'
    import svgicon from '../components/svgicon'
    
    Vue.component("svgicon", svgicon);
    
    const requireAll = requireContext => requireContext.keys().map(requireContext);
    const req = require.context('.', false, /.svg$/);
    requireAll(req);

    4、main.js

    import "./svgicons"

    5、使用

    <svgicon style="color: red;font-size: 50px" iconName="all"></svgicon>
  • 相关阅读:
    安卓天天练练(三)常用组件Toast
    安卓天天练练(二)相对布局和帧布局
    javascript表单操作
    JavaScript replace() 方法
    android基础(一)
    四大类NoSQL数据库
    php基础八(cookie)
    php基础(七)文件
    php基础(六)Include
    php基础(五)日期
  • 原文地址:https://www.cnblogs.com/linding/p/13276212.html
Copyright © 2011-2022 走看看