vue项目引入图标

最新推荐文章于 2024-07-29 13:59:59 发布

fantexi5

最新推荐文章于 2024-07-29 13:59:59 发布

阅读量306

点赞数 1

本文链接：https://blog.csdn.net/fantexi5/article/details/118668672

版权

本文介绍了如何在前端项目中使用SVG图标，包括SymbolSVG格式的图标引入方式和SVG-sprite-loader的配置步骤，以及如何创建自定义SVG组件和全局注册，最后展示了在main.js中引入和使用SVG图标的方法。

摘要由CSDN通过智能技术生成

1.Symbol SVG图片格式

拷贝下载项目，复制inconfont.js到资源文件目录下，并引入inonfont.js文件

加入通用css代码（引入一次就行）

.icon {
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

挑选相应图标并获取类名，应用于页面

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

2.使用svg格式插画、图片

安装svg-sprite-loader

npm install svg-sprite-loader -D

或者yarn安装：

yarn add svg-sprite-loader -D

vue.config.js中添加配置：

chainWebpack: config => {
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule
        .use('svg-sprite-loader')
        .loader('svg-sprite-loader')
        .options({
            symbolId: 'icon-[name]',
        })
},

在公共组件components下创建SvgIcon文件夹，在index.vue中引入：

<template>
    <svg :class="svgClass" aria-hidden="true">
        <use :xlink:href="iconName"></use>
    </svg>
</template>

<script>
export default {
    name: 'svg-icon',
    props: {
        iconClass: {
            type: String,
            required: true,
        },
        className: {
            type: String,
        },
	},
    computed: {
        iconName () {
            return `#icon-${this.iconClass}`
        },
        svgClass () {
            if (this.className) {
                return 'svg-icon ' + this.className
            } else {
                return 'svg-icon'
            }
        },
	},
}
</script>

<style scoped>
	.svg-icon {
	  width: 1em;
	  height: 1em;
	  vertical-align: -0.15em;
	  fill: currentColor;
	  overflow: hidden;
	}
</style>

在src下创建icons文件夹，svg文件夹下存放.svg文件，index.js中注入svg

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg组件

// 注册到全局
Vue.component('svg-icon', SvgIcon)

const requireAll = requireContext => requireContext.keys().map(requireContext)
// eslint-disable-next-line
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)