類似字體的SVG圖標系統，用於VUE

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

本文介紹了vue.js應用程序的理想SVG圖標系統，重點介紹了簡單性和可維護性：

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

該系統是使用兩個小型單文件的VUE組件構建的，需要：

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

SVG Sprite組件（ SvgSprite.vue ）

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

<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>其內容由$options.svgSprite動態生成的元素。腳本使用require.context帶有svg-inline-loader來處理SVG，刪除了不必要的標籤和屬性。然後，它將每個SVG轉換為<symbol></symbol>元素，添加一個唯一的ID。

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

圖標組件（ SvgIcon.vue ）

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

<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樣式的圖標像圖標字體一樣表現，從而實現了簡單的顏色和尺寸調整。 spin道具增加了動畫。

在main.js中註冊此組件：

從“ vue”導入vue
從'@/components/svgicon.vue'導入svgicon
vue.component（'svg-icon'，svgicon）

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

以上是類似字體的SVG圖標系統，用於VUE的詳細內容。更多資訊請關注PHP中文網其他相關文章！