Permudahkan Pengurusan SVG: Tukar Laluan kepada Satu Fail JS Pemalar

Apabila membina aplikasi React.js, mengurus ikon SVG dengan cekap adalah penting. SVG menyediakan skalabiliti dan fleksibiliti yang diperlukan untuk reka bentuk responsif, tetapi mengendalikannya dalam projek besar boleh menjadi menyusahkan. Di situlah svg-path-constants masuk, alat CLI yang direka untuk menyelaraskan aliran kerja SVG anda dengan menukar laluan SVG kepada pemalar boleh guna semula.

Mengapa SVG dan Mengapa Pemalar?

Dalam artikel sebelumnya, "Perbandingan Komprehensif Pilihan Pengurusan Ikon SVG dalam Projek React.js", saya membincangkan pelbagai kaedah untuk mengurus ikon SVG, termasuk SVG sebaris, sprite SVG dan menggunakan komponen React untuk setiap ikon. Walaupun setiap kaedah mempunyai kebaikan dan keburukan, satu cabaran kekal: memastikan laluan SVG anda teratur dan boleh digunakan semula.

Menggunakan pemalar untuk laluan SVG memberikan saiz berkas kecil dan masa binaan yang pantas.

Apakah svg-path-constants?

svg-path-constant ialah alat CLI yang membantu anda menjana pemalar daripada fail SVG, menjadikannya lebih mudah untuk menyepadukan dan mengurus ikon SVG dalam projek React anda. Ia menukar laluan SVG kepada pemalar JS, menyokong konvensyen penamaan yang fleksibel dan membenarkan output yang boleh disesuaikan.

Ciri-ciri Utama:

• Jana Pemalar daripada Fail SVG: Tukar laluan SVG kepada pemalar dengan pantas.
• Konvensyen Penamaan Fleksibel: Menyokong camelCase, PascalCase, snake_case dan SCREAMING_SNAKE_CASE.
• Output Boleh Disesuaikan: Jana pemalar dengan templat tersuai dan laluan fail.
• Penukaran Atribut: Menukar atribut SVG seperti kelegapan, kelegapan isian, lejang dan isi ke dalam rentetan laluan secara automatik.
• Output Tunggal atau Berbilang: Hasilkan satu fail output atau berbilang fail berdasarkan struktur input anda.

Bermula dengan svg-path-constants

Anda boleh mula menggunakan svg-path-constants serta-merta dengan npx:

npx svg-path-constants@latest

Sebagai alternatif, anda boleh memasangnya secara global atau sebagai pergantungan pembangun:

npm install -g svg-path-constants
npm install --save-dev svg-path-constants

Contoh Penggunaan

Penggunaan Asas

Katakan anda mempunyai fail SVG dalam src/aset/ikon dan ingin menjana pemalar dalam src/components/Icon/paths.js:

npx svg-path-constants@latest -i src/assets/icons -o src/components/Icon/paths.js

Contoh Output:

// src/components/Icon/paths.js
export const folderIcon1 = "M10 10 H 90 V 90 H 10 Z"; // Example SVG path
export const folderIcon2 = "M20 20 H 80 V 80 H 20 Z"; // Example SVG path

Format Penamaan Tersuai

Tentukan format penamaan yang berbeza, seperti PascalCase:

npx svg-path-constants@latest -i src/assets/icons -o src/components/Icon/paths.js -f PascalCase

Contoh Output:

// src/components/Icon/paths.js
export const FolderIcon1 = "M10 10 H 90 V 90 H 10 Z"; // Example SVG path
export const FolderIcon2 = "M20 20 H 80 V 80 H 20 Z"; // Example SVG path

Menggunakan Templat untuk Output

Kawal penamaan dan output fail dengan templat tersuai:

npx svg-path-constants@latest -i src/assets/icons -o src/components/Icon/{-2,-1}/{0}.js -t "{1,-3}"

Contoh Output:

// src/components/Icon/folder/icon1.js
export const folderIcon1 = "M10 10 H 90 V 90 H 10 Z"; // Example SVG path

// src/components/Icon/folder/icon2.js
export const folderIcon2 = "M20 20 H 80 V 80 H 20 Z"; // Example SVG path

Mengendalikan Atribut SVG

svg-path-constant boleh menukar atribut SVG seperti kelegapan, kelegapan isian, lejang dan mengisi ke dalam komponen rentetan laluan.

Contoh SVG:

<svg>
    <path d="M10 10 H 90 V 90 H 10 Z" opacity="0.5" fill-opacity="0.8" stroke="#ff0000" fill="#00ff00"/>
</svg>

Malar Laluan Dijana:

export const myIcon = "o0.5 O0.8 fff000 F00ff00 M10 10 H 90 V 90 H 10 Z";

• opacity="0.5" menjadi o0.5
• fill-opacity="0.8" menjadi O0.8
• stroke="#ff0000" menjadi fff000
• fill="#00ff00" menjadi F00ff00

Ciri ini membolehkan anda menyimpan maklumat gaya penting terus dalam rentetan laluan, mengekalkan perwakilan yang padat dan bermaklumat.

Contoh: Menggunakan Pemalar Laluan SVG dalam Komponen Reaksi

Sebaik sahaja anda telah menjana pemalar laluan SVG dengan pemalar laluan-svg, anda boleh menyepadukan pemalar itu dengan mudah ke dalam komponen React anda. Ini bukan sahaja memastikan kod anda bersih tetapi juga membolehkan penggunaan semula laluan SVG dengan mudah merentas aplikasi anda.

Langkah 1: Jana Pemalar Laluan SVG

Anggap anda telah menjalankan perintah berikut untuk menjana pemalar daripada fail SVG anda:

npx svg-path-constants@latest -i src/assets/icons -o src/components/Icon/paths.js

Arahan ini menjana fail src/components/Icon/paths.js dengan pemalar seperti:

// src/components/Icon/paths.js
export const folderIcon1 = "M10 10 H 90 V 90 H 10 Z"; // Example SVG path
export const folderIcon2 = "M20 20 H 80 V 80 H 20 Z"; // Example SVG path

Langkah 2: Cipta Komponen Reaksi untuk Membuat SVG

Sekarang, mari buat komponen React yang menjadikan ikon SVG ini menggunakan pemalar yang dijana.

import React from 'react';
import { folderIcon1, folderIcon2 } from './paths'; // Import the generated SVG path constants

const parsePathData = (d) => {
    const pathElements = [];
    const pathCommands = d.split(/(o[\d.]+|O[\d.]+|f[0-9a-fA-F]+|F[0-9a-fA-F]+)/); // Split by style commands
    let attributes = null;

    pathCommands.forEach((text, i) => {
        const isCommand = Boolean(i % 2);
        if (isCommand) {
            if (!attributes) {
                attributes = {};
            }
            const match = text.match(/^(o([\d.]+))?(O([\d.]+))?(f([0-9a-fA-F]+))?(F([0-9a-fA-F]+))?$/);

            const [, , opacity, , fillOpacity, , stroke, , fill] = match;
            if (opacity) attributes.opacity = opacity;
            if (fillOpacity) attributes["fill-opacity"] = fillOpacity;
            if (stroke) attributes.stroke = `#${stroke}`;
            if (fill) attributes.fill = `#${fill}`;
            return;
        }
        if (text.trim().length) {
            pathElements.push({ ...attributes, d: text });
        }
    });

    return pathElements;
};


const SvgIcon = ({ d, size = 24, color = 'currentColor', ...props }) => {
    const pathElements = parsePathData(d);

    return (
        <svg
            width={size}
            height={size}
            viewBox="0 0 24 24"
            fill={color}
            xmlns="http://www.w3.org/2000/svg"
            {...props}
        >
            {pathElements.map((attrs, index) => (
                <path key={index} {...attrs} />
            ))}
        </svg>
    );
};

const IconDemo = () => (
    <div>
        <h2>SVG Icon Examples</h2>
        <div>
            <h3>Folder Icon 1</h3>
            <SvgIcon path={folderIcon1} size={48} color="blue" />
        </div>
        <div>
            <h3>Folder Icon 2</h3>
            <SvgIcon path={folderIcon2} size={48} color="green" />
        </div>
    </div>
);

export default IconDemo;

Langkah 3: Gunakan Komponen dalam Aplikasi Anda

Kini anda boleh menggunakan komponen IconDemo di mana-mana sahaja dalam aplikasi React anda untuk memaparkan ikon SVG:

import React from 'react';
import ReactDOM from 'react-dom';
import IconDemo from './components/Icon/IconDemo';

ReactDOM.render(
    <React.StrictMode>
        <IconDemo />
    </React.StrictMode>,
    document.getElementById('root')
);

Penjelasan:

1. Fungsi parsePathData:

   • Ia diperlukan hanya jika anda mempunyai kelegapan atau berbilang warna dalam fail SVG.
   • Fungsi parsePathData memproses rentetan atribut d lanjutan, mengekstrak perintah seperti o (kelegapan), F (warna isian) dan f (warna lejang).
   • Ia memisahkan rentetan berdasarkan arahan ini, menggunakan atribut yang sepadan dan mengembalikan tatasusunan elemen laluan.

2. Komponen SvgIcon:

   • Komponen ini mengambil rentetan atribut d, menghuraikannya dengan parsePathData dan memaparkan laluan SVG.
   • Komponen membenarkan penyesuaian melalui prop seperti saiz dan warna.

3. Komponen IconDemo:

   • Ini ialah komponen demo yang menunjukkan cara menggunakan komponen SvgIcon dengan rentetan d, saiz dan warna yang berbeza.

Apa Seterusnya? Menambah Imej Raster pada Pemalar

Saya sedang mengusahakan pustaka npm yang akan mempertingkatkan svg-path-constant dengan menambahkan imej raster (PNG) sebagai ulasan di atas setiap pemalar yang dijana. Ini akan memberikan gambaran visual ikon terus dalam kod anda, menjadikannya lebih mudah untuk mengenal pasti dan mengurus laluan SVG.

Kesimpulan

Mengurus laluan SVG dalam projek React tidak perlu bersusah payah. Dengan svg-path-constants, anda boleh memastikan ikon anda teratur, kod anda bersih dan aliran kerja anda cekap. Dan tidak lama lagi, dengan pustaka yang akan datang untuk menambahkan imej raster pada ulasan ikon, anda akan mempunyai cara yang lebih visual dan intuitif untuk mengurus aset SVG anda.

Cuba svg-path-constants hari ini:

npx svg-path-constants@latest

Dan nantikan lebih banyak kemas kini!

Atas ialah kandungan terperinci Permudahkan Pengurusan SVG: Tukar Laluan kepada Satu Fail JS Pemalar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!