SVG in Vue-Komponente umwandeln
Fügen Sie eine SVG ein und erhalten Sie eine Vue-3-Komponente (.vue) als Einzeldatei, die Sie direkt in Ihr Projekt importieren können, mit automatischer Weitergabe der Attribute (class, style, Größe) an das übergeordnete Element.
Warum eine SVG in eine Vue-Komponente umwandeln, statt sie unverändert zu importieren?
Eine eigene Vue-Komponente für ein Icon lässt sich überall im Projekt leicht wiederverwenden, Sie können ihr von jeder übergeordneten Komponente aus Klassen oder Styles (Farbe, Größe) mitgeben, und Ihr Editor bietet Syntaxhervorhebung und Prüfung wie bei jeder anderen Vue-Komponente.
Muss man bei Vue die Attribute wie bei React in camelCase umwandeln?
Nein, anders als bei React/JSX akzeptieren Vue-Templates Attribute in Kebab-Case (stroke-width, fill-rule ...) nativ so, wie sie sind: Eine Umwandlung der Attribute ist daher nicht nötig, es wird lediglich v-bind="$attrs" ergänzt, damit sich die Komponente bei der Verwendung anpassen lässt.
Kann ich die Farbe des Icons von der übergeordneten Komponente aus ändern?
Verwendet Ihre SVG fill="currentColor" (wie im Beispiel), wird die umgebende CSS-Textfarbe automatisch auf das Icon angewendet: Ändern Sie einfach die CSS-Eigenschaft color des übergeordneten Elements, um das Icon umzufärben, ohne die Komponente anzufassen.
Ihre SVG-Datei bleibt privat: Die Umwandlung in eine Vue-Komponente läuft vollständig in Ihrem Browser ab, ohne dass etwas an einen Server gesendet wird.