Sistem ikon SVG seperti font untuk Vue

Menguruskan ikon dalam vue.js boleh menjadi rumit. Fon ikon adalah mudah tetapi kekurangan fleksibiliti penyesuaian, dan kawalan versi boleh menjadi mimpi ngeri kerana sifat binari mereka. SVGs menawarkan penyelesaian yang unggul, tetapi mengekalkan kemudahan penggunaan dan pengurusan yang cekap memerlukan pendekatan yang bijak.

Artikel ini membentangkan sistem ikon SVG yang ideal untuk aplikasi Vue.js, yang memberi tumpuan kepada kesederhanaan dan penyelenggaraan:

• Penambahan Ikon/penyingkiran: Hanya tambahkan atau padamkan SVG dari folder yang ditetapkan.
• Penggunaan: Gunakan ikon dalam templat dengan sintaks mudah<svg-icon icon="rocket"></svg-icon> .
• Styling: Ikon skala dan warna menggunakan ciri-ciri font-size dan color CSS, meniru tingkah laku fon ikon.
• Pengoptimuman: Menghindari duplikasi kod SVG untuk pelbagai contoh ikon yang sama.
• Integrasi Webpack: Tiada perubahan konfigurasi webpack diperlukan.

Sistem ini dibina menggunakan dua komponen VUE kecil, satu fail dan memerlukan:

• Webpack: Diasumsikan jika menggunakan Vue CLI.
• svg-inline-loader : Dipasang melalui npm install svg-inline-loader --save-dev . Loader ini membersihkan bahagian yang tidak perlu kod SVG.

Komponen SVG Sprite ( SvgSprite.vue )

Untuk mengelakkan pengulangan kod SVG, kami membuat SVG Sprite -SVG tersembunyi yang mengandungi semua ikon SVG yang lain. Ikon diakses melalui<use></use> Tag merujuk ID Ikon:<svg><use xlink:href="#rocket"></use></svg> . Komponen SvgSprite melaksanakan ini:

<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>

Templat termasuk tersembunyi<svg></svg> elemen yang kandungannya dihasilkan secara dinamik oleh $options.svgSprite . Skrip menggunakan require.context dengan svg-inline-loader untuk memproses SVGs, mengeluarkan tag dan atribut yang tidak perlu. Ia kemudian menukarkan setiap SVG menjadi a<symbol></symbol> elemen, menambah ID unik.

Letakkan komponen ini di bahagian atas fail App.vue anda.

Komponen ikon ( SvgIcon.vue )

Komponen SvgIcon lebih mudah, menggunakan<use></use> Tag ke Ikon Rujukan dari 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 gaya ikon untuk berkelakuan seperti fon ikon, membolehkan pelarasan warna dan saiz mudah. Prop spin menambah animasi.

Daftar komponen ini di main.js :

 Import Vue dari 'Vue'
Import svgicon dari '@/komponen/svgicon.vue'
Vue.component ('svg-icon', svgicon)

Sistem ini menyediakan penyelesaian yang bersih, cekap, dan mudah dikekalkan untuk menguruskan ikon SVG dalam aplikasi Vue.js anda. Penambahbaikan selanjutnya termasuk mengendalikan nisbah aspek bukan persegi dan rangka kerja yang lebih luas/membina keserasian alat.

Atas ialah kandungan terperinci Sistem ikon SVG seperti font untuk Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!