Vue怎么用自定义组件的方式引入图标

发布时间:2022-10-13 11:31:48 作者:iii
来源:亿速云 阅读:192

这篇“Vue怎么用自定义组件的方式引入图标”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue怎么用自定义组件的方式引入图标”文章吧。

搭建环境

这里通过@vue/cli 4.5.13新建项目,并且需要安装依赖svg-sprite-loader,用来处理对应的svg图标,方便我们使用。

安装: npm install --save-dev svg-sprite-loader

配置vue.config.js

在安装svg-sprite-loader后,新建vue.config.js来配置依赖:

// vue.config.js
const { resolve } = require("path")

module.exports = {
  chainWebpack(config) {
    config
      .module
      .rule("svg")
      .exclude
      .add(resolve("src/icons"))
      .end()
    config
      .module
      .rule("icons")
      .test(/.svg$/)
      .include
      .add(resolve("src/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]"
      })
  }
}

这里通过chainWebpack来做了两项配置:

新建图标组件

在components目录下新建一个SvgIcon.vue文件:

<template>
  <i>
    <!-- aria-hidden, 帮助残障人士阅读(设备读取内容时会跳过这个标签以免混淆) -->
    <svg aria-hidden="true" :width="size" :height="size" :fill="fillColor">
      <use :xlink:href="iconName" rel="external nofollow" ></use>
    </svg>
  </i>
</template>

<script>
import { PropType, toRefs } from "vue"

export default {
  props: {
    size: {
      type: Number as PropType<number>,
      default: 14
    },
    fillColor: {
      type: String as PropType<string>,
      default: "#000"
    },
    iconName: {
      type: String as PropType<string>,
      required: true
    }
  },
  setup(props: any) {
    const { size, fillColor, iconName: _iconName } = toRefs(props)
    const iconName = `#${_iconName.value}`

    return {
      size,
      fillColor,
      iconName
    }
  }
}
</script>

然后,新建一个icons目录,并且新建一个index文件,用来挂在组件和引入svg图标:

// index.ts
import SvgIcon from "@/components/SvgIcon.vue"
import { App } from "vue"

export default (app: App) => {
  app.component("svg-icon", SvgIcon)
}

const ctx = require.context("./svg", false, /.svg$/)
const requestAll = (ctx: __WebpackModuleApi.RequireContext) => ctx.keys().forEach(ctx)

requestAll(ctx)
// main.ts
import { createApp } from "vue"
import App from "./App.vue"
import installSvgIcon from "@/icons/index"

const app = createApp(App)

installSvgIcon(app)
app.mount("#app")

这个文件做了两件事:

  1. 通过导出一个方法来挂载全局组件svg-icon;

  2. 通过require.context来实现自动化引入svg目录下的图标文件。

使用组件

首先,我们要在icons/svg目录下存放svg图标文件(在iconfont上找自己需要的);

然后,就可以在其他地方使用啦:

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <svg-icon icon-name="icon-dashboard"></svg-icon>
  <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</template>

直接通过组件svg-icon的方式引入,然后传入icon-name即可,icon-name的值由icon拼接svg文件名组成。

以上就是关于“Vue怎么用自定义组件的方式引入图标”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。

推荐阅读:
  1. HTML中如何引入图标
  2. 怎么在vue项目中引入Iconfont图标库

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue

上一篇:vue如何实现短信验证码

下一篇:petite-vue如何实现

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》