基于Vue只能實現(xiàn)自定義組件引入圖標

這篇“基于Vue只能實現(xiàn)自定義組件引入圖標”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“基于Vue只能實現(xiàn)自定義組件引入圖標”文章吧。

從策劃到設計制作，每一步都追求做到細膩，制作可持續(xù)發(fā)展的企業(yè)網(wǎng)站。為客戶提供成都網(wǎng)站設計、網(wǎng)站制作、網(wǎng)站策劃、網(wǎng)頁設計、域名申請、網(wǎng)站空間、網(wǎng)絡營銷、VI設計、網(wǎng)站改版、漏洞修補等服務。為客戶提供更好的一站式互聯(lián)網(wǎng)解決方案,以客戶的口碑塑造優(yōu)易品牌,攜手廣大客戶,共同發(fā)展進步。

搭建環(huán)境

這里通過@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來做了兩項配置：

第一個是讓原來的其他處理svg的依賴不處理src/icons下我們的自定義圖標文件
通過svg-sprite-loader來處理自定義的圖標文件，options里面的設置表示，生成的svg的symbolId為icon和文件名的拼接。

新建圖標組件

在components目錄下新建一個SvgIcon.vue文件：

<template>
  <i>
    <!-- aria-hidden, 幫助殘障人士閱讀(設備讀取內(nèi)容時會跳過這個標簽以免混淆) -->
    <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")

這個文件做了兩件事：

通過導出一個方法來掛載全局組件svg-icon；
通過require.context來實現(xiàn)自動化引入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只能實現(xiàn)自定義組件引入圖標”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關的知識內(nèi)容，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

名稱欄目：基于Vue只能實現(xiàn)自定義組件引入圖標
文章位置：http://www.muchs.cn/article36/ghgisg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設計公司、用戶體驗、網(wǎng)站改版、電子商務、企業(yè)網(wǎng)站制作、網(wǎng)站收錄

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容