美文网首页
VUE3.0使用SVG图标

VUE3.0使用SVG图标

作者: MaJiT | 来源:发表于2021-05-25 14:44 被阅读0次

1.开发环境安装依赖

npm install svg-sprite-loader -D

2.vue.config.js 配置

module.exports ={
    chainWebpack: config => {
        config.module.rules.delete("svg"); //重点:删除默认配置中处理svg,
        config.module
            .rule('svg-sprite-loader')
            .test(/\.svg$/)
            .include
            .add(resolve('src/assets/svg')) //处理svg目录
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })
    }
}

3.创建SVG组件库

<template>
    <svg aria-hidden="true">
        <use :href="'#icon-'+iconName"/>
    </svg>
</template>

<script>
    export default {
        name: "Index",
        props:{
            iconName:{
                type: String,
                default: '',
                require: true
            }
        },
        setup(){
            //获取当前svg目录下的所有svg文件
            const req = require.context('@/assets/svg',false,/\.svg$/);
            //解析
            const requireAll = (requireContext) =>{
                return requireContext.keys().map(requireContext);
            }
            requireAll(req)
        }
    }
</script>

4.调用组件

<svg-icon iconName="home"/>

注意:1.首先引入组件或组件设置成全局组件。2.样式可以和其他元素一样随便设置

相关文章

  • VUE3.0使用SVG图标

    1.开发环境安装依赖 2.vue.config.js 配置 3.创建SVG组件库 4.调用组件 注意:1.首先引入...

  • AGS JS开发-以JSON参数构建地图渲染之四

    使用SVG图标符号 1.环境说明 ArcGIS 10.4.1 JS API 3.15 2.SVG图标介绍 SVG是...

  • 封装svg组件

    svg图标的使用基于这次项目的图标使用本地的svg图片。普通的使用方式 避免每次写这三行代码,封装一个svg组件 ...

  • 使用 iconfont 来引用 font class 图标

    之前项目中一直使用美工给的 svg 图标,但是有几个缺点: svg 图标无法很方便的定义颜色,大小。 svg 图标...

  • 开发技巧分享—给 FileMaker 装备 SVG 高清无码大图

    SVG 图标的优势 FileMaker 自 14 版开始支持 SVG 格式的图标。在之前的版本,只能使用 png ...

  • vue-cli3使用svg的最佳实践

    目录 iconfont的三种使用方式及其优缺点 封装svg组件 svg雪碧图 自动导入svg图标 封装svg组件 ...

  • vue 使用svg图标

    之前做项目中,使用的小图标都是使用字体图标,现在这个项目因为毕竟小,就想使用svg来展示svg。因为在学习的过程中...

  • Iconfont应用规范

    SVG图标绘制 一、图标绘制范围 绘制工具:AI、SKETCH 另外不建议使用PS,因为虽然PS也可以导出SVG,...

  • android apk瘦身

    apk打包流程图 1,SVG图片替换PNG图片 使用svg图注意事项: 1 svg图适用于小图标,svg宽高 小于...

  • 在Material UI中使用svg图标

    这篇文章就讲两个事儿: 如何在一个组件中使用svg图标。 如何将svg图标作为全局资源使用,而不仅限于一个或几个组...

网友评论

      本文标题:VUE3.0使用SVG图标

      本文链接:https://www.haomeiwen.com/subject/ycgqsltx.html