在vue.js中管理圖標(biāo)可能很棘手。圖標(biāo)字體很方便，但缺乏自定義靈活性，由於其二進制性質(zhì)，版本控制可能是一場噩夢。 SVG提供了出色的解決方案，但是保持易用性和有效的管理需要進行周到的方法。

本文介紹了vue.js應(yīng)用程序的理想SVG圖標(biāo)系統(tǒng)，重點介紹了簡單性和可維護性：

• 圖標(biāo)添加/刪除：只需從指定文件夾中添加或刪除SVG即可。
• 用法：使用直接語法的模板中使用圖標(biāo)<svg-icon icon="rocket"></svg-icon>。
• 樣式：使用CSS font-size和顏色屬性的比例和color圖標(biāo)，模仿圖標(biāo)字體行為。
• 優(yōu)化：避免使用同一圖標(biāo)多個實例的SVG代碼重複。
• WebPack集成：無需更改WebPack配置。

該系統(tǒng)是使用兩個小型單文件的VUE組件構(gòu)建的，需要：

• WebPack：假定使用VUE CLI。
• svg-inline-loader ：可通過npm install svg-inline-loader --save-dev 。該裝載機清理了SVG代碼的不必要部分。

SVG Sprite組件（ SvgSprite.vue ）

為了防止SVG代碼重複，我們創(chuàng)建了一個SVG Sprite，這是一個隱藏的SVG，其中包含所有其他SVG圖標(biāo)。圖標(biāo)是通過<use></use>引用圖標(biāo)ID的標(biāo)籤：<svg><use xlink:href="#rocket"></use></svg> 。 SvgSprite組件實現(xiàn)了以下操作：

<template>
  <svg height="0" style="display: none;" v-html="$options.svgSprite" width="0"></svg>
</template>

<script>
const svgContext = require.context(
  '!svg-inline-loader?'  
  'removeTags=true'   // Remove title tags, etc.
  '&removeSVGTagAttrs=true'   // Remove attributes
  '&removingTagAttrs=fill'   // Remove fill attributes
  '!@/assets/icons', // Icon directory
  true, // Search subdirectories
  /\w \.svg$/i // Only include SVG files
);

const symbols = svgContext.keys().map(path => {
  const id = path.replace(/^\.\/(.*)\.\w $/, '$1'); // Extract ID from filename
  const content = svgContext(path); // Get SVG content
  return content.replace('<svg', `<symbol id="${id}"`).replace('svg>', 'symbol>'); // Convert to symbol
});

export default {
  name: 'SvgSprite',
  svgSprite: symbols.join('\n'), // Concatenate symbols
};
</script>

該模板包括一個隱藏<svg></svg>其內(nèi)容由$options.svgSprite動態(tài)生成的元素。腳本使用require.context帶有svg-inline-loader來處理SVG，刪除了不必要的標(biāo)籤和屬性。然後，它將每個SVG轉(zhuǎn)換為<symbol></symbol>元素，添加一個唯一的ID。

將此組件放在App.vue文件的頂部。

圖標(biāo)組件（ SvgIcon.vue ）

使用SvgIcon組件更簡單<use></use>標(biāo)籤以參考Sprite的圖標(biāo)：

<template>
  <svg class="icon" :class="{ 'icon-spin': spin }">
    <use :xlink:href="`#${icon}`"></use>
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    icon: { type: String, required: true },
    spin: { type: Boolean, default: false },
  },
};
</script>

<style scoped>
svg.icon {
  fill: currentColor;
  height: 1em;
  margin-bottom: 0.125em;
  vertical-align: middle;
  width: 1em;
}
svg.icon-spin {
  animation: icon-spin 2s infinite linear;
}
@keyframes icon-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(359deg); }
}
</style>

CSS樣式的圖標(biāo)像圖標(biāo)字體一樣表現(xiàn)，從而實現(xiàn)了簡單的顏色和尺寸調(diào)整。 spin道具增加了動畫。

在main.js中註冊此組件：

從“ vue”導(dǎo)入vue
從'@/components/svgicon.vue'導(dǎo)入svgicon
vue.component（'svg-icon'，svgicon）

該系統(tǒng)為您的vue.js應(yīng)用程序中的SVG圖標(biāo)提供了乾淨(jìng)，高效且易於維護的解決方案。進一步的改進可能包括處理非方面的縱橫比以及更廣泛的框架/構(gòu)建工具兼容性。

以上是類似字體的SVG圖標(biāo)系統(tǒng)，用於VUE的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！