Zusammenfassung verschiedener Methoden zur Verwendung von SVG in React (mit Code)

Dieser Artikel stellt Ihnen eine Zusammenfassung der verschiedenen Methoden zur Verwendung von SVG in React vor (mit Code). Ich hoffe, dass er für Sie hilfreich ist.

Vorteile

• SVG kann von vielen Tools (z. B. vscode) gelesen und geändert werden

• Keine Verzerrung, das Bild ist beim Vergrößern oder Verkleinern klar

• SVG-Dateien sind reines XML und eine DOM-Struktur

• Einfach zu bedienen, Designsoftware kann direkt exportiert werden

Kompatibilität

Vorherige Kompatibilitätstabelle, oder gehen Sie zu caniuse.com, um

Kompatibilität ist kein großes Problem. Wenn Ihre Website weiterhin mit diesen alten Browsern kompatibel sein muss, gibt es in der Community entsprechende Lösungen, wie z. B. einige der SVG-Downgrade-Technologien von Zhang Xinxu

Anwendung

Es gibt verschiedene Optionen, diejenige, die Ihren Bedürfnissen entspricht, ist die beste

Direkt in der Vorlage verwenden

const Home = () => (
    <div>
        <svg>
            <rect></rect>
        </svg>
    </div>
)

1. Wenn jedes SVG im Frontend gezeichnet werden muss, sind die Frontend-Anforderungen höher.

2. Wenn jedes Symbol aus dem vom Designer angegebenen SVG-Code kopiert wird, müssen verschiedene Tags geändert werden, und es wird ein Fehler gemeldet, wenn der Fehler behoben wird

Diese Methode ist nicht benutzerfreundlich

SVG in Schriftart konvertieren

Iconfont

Kopieren Sie den Code direkt in das Projekt-CSS, passen Sie Ihren Etikettenstil an und lesen Sie den offiziellen Artikel von Alibaba. Er ist jedoch einfach und grob zu verwenden Es muss manuell hochgeladen werden (andere Lösungen können gerne hinzugefügt werden). Wenn Sie es außerdem in einer anderen Umgebung als dem CDN von Alibaba bereitstellen möchten, müssen Sie es zuerst herunterladen und dann in die Zielumgebung hochladen Etwas mühsam.

Darüber hinaus bieten icomoon und andere ähnliche Lösungen

SVG in Reaktionskomponente konvertieren

Bitte beachten Sie: Folgendes umfasst die Typoskript-bezogene Konfiguration

Konvertierung vor der Projekterstellung

Beispiel:

typescript-react-svg-icon -Generator, wir benötigen einen Vorbefehl, um SVG zu konvertieren.

// svg-generator.js

const generator = require('typescript-react-svg-icon-generator')

const config = {
    svgDir: './svg/',
    destination: './Icon/index.tsx'
}
generator(config)

$ node ./svg-generator.js

Verwenden Sie:

import Icon from './Icon'
export default class App extends Component {
    render() {
        return <icon></icon>
    }
}

Außerdem bietet svgr (unten erwähnt) auch diese Lösung, bitte überprüfen Sie sie selbst

Konvertierung beim Erstellen des Projekts

Beispiel:

@svgr/webpack

Hmm, das ist ein Webpack-Loader.

// webpack rules config
{
    test: /\.svg$/,
    loader: '@svgr/webpack'
}

// 全局声明svg component定义
declare interface SvgrComponent extends React.StatelessComponent<react.svgattributes>> {}

declare module '*.svg' {
    const content: SvgrComponent
    export default content
}</react.svgattributes>

import IconReact from '@assets/svg/react.svg'

const Home = () => (
    <p>
        <iconreact></iconreact>
    </p>
)

Die Vorteile dieser Lösung spiegeln sich nicht nur in der Build-Time-Konvertierung wider, sondern, was noch wichtiger ist, sie erbt SVGAttributes vollständig, es sind keine zusätzlichen Lernkosten erforderlich. Sie können sich auf das Projekt ts-react-webpack4 oder das Gerüst beziehen! Steamer-React-Ts

Darüber hinaus gibt es React-SVG, SVG-React-Loader usw. Es wird auch auf ähnliche Weise implementiert

Empfohlene verwandte Artikel:

Die Rolle des SVG-Pfads: So verwenden Sie den SVG-Pfad in der Webentwicklung

Wie Storage Event die Kommunikation zwischen Seiten implementiert

Das obige ist der detaillierte Inhalt vonZusammenfassung verschiedener Methoden zur Verwendung von SVG in React (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!