iconify prerendered Download - iconify prerendered Quellcode Download

[! Wichtig] Dieses Projekt wird vom Entwickler aus der Ukraine aufrechterhalten?
Ich gebe mein Bestes, aber aufgrund der anhaltenden vollständigen Invasion der Ukraine in Russland habe ich kaum die Energie, Open-Source-Projekte zu unterstützen.
Wenn meine Arbeit für Sie nützlich war, sollten Sie die Ukraine oder mich persönlich unterstützen. Sogar Ihre 1 US -Dollar hat Auswirkungen!

@Ikonify-Prerendered

Ein Superset Standalone Icon-Komponenten für VUE mit Null-Abhängigkeiten. Für einfache Gebrauchs und hohe Leistung entwickelt.

Merkmale

Einfach zu bedienen
- Keine Plugins erforderlich! Kompatibel mit allen Build -Tools.
- Entwickelt für die beste Kompatibilität mit der IDE Auto-Completion (Demo).
- Null Abhängigkeiten.
- SSR / SSG freundlich.
- Unterstützung von Typenkript.
- Einheitliche API über alle Symbolsätze.
Hohe Leistung
- Erfordert keine externen Ressourcen wie Schriftarten, CSS, Bilder.
- Der Symbolcode ist in Ihr Bundle eingebettet.
- Unterstützt Baumschütteln, so dass nur die von Ihnen verwendeten Symbole in das Bundle aufgenommen werden.
- Funktioniert offline.
Angetrieben von Ikonify.

Live-Demo : https://stackblitz.com/edit/iconify-prerendered-demo?file=src%2fapp.vue

Installation

Installieren Sie das entsprechende Symbolsatz

 npm i @iconify-prerendered/vue-<icon-set-name>

# Bootstrap Icons
npm i @iconify-prerendered/vue-bi

# Material Design Icons
npm i @iconify-prerendered/vue-mdi

Verwendung

Importieren Sie die Symbolkomponente von einem Set wie gewohnt.

< script setup>
// Import two icons from Font Awesome Brands
import { IconVuejs , IconJs } from ' @iconify-prerendered/vue-fa-brands ' ;
// Import one Icon from Material Design icons
import { IconCardsHeart } from ' @iconify-prerendered/vue-mdi ' ;
</ script >

< template >
  < p >
    < IconJs />
    < IconCardsHeart />
    < IconVuejs />
  </ p >
</ template >

Nur diese drei Symbole werden in Ihr Bundle aufgenommen. Ihr Bundler kann alle anderen Symbole Baumschütteln.

Das ist alles was du brauchst. Keine Plugins, zusätzliche Konfigurationen, IDE -Erweiterungen oder etwas anderes.

Anpassen des Symbols Standardattribute

Standardmäßig haben alle Symbole nur zwei Attribute: role="img" und aria-hidden="true" . Während Sie diese Attribute neu definieren oder neue für jedes Symbol hinzufügen können, möchten Sie möglicherweise bestimmte Attribute wie class oder style auf alle Symbole innerhalb eines Satzes anwenden.

Um dies zu erreichen, können Sie Symbole durch einen new Proxy wieder exportieren und Standardattribute einfügen

 import * as defaultIcons from '@iconify-prerendered/vue-mdi' ;

// accessing to icon through this Proxy will add additional attributes
export const themedIcons = new Proxy ( { } as typeof defaultIcons , {
  get ( _ , iconKey : keyof typeof defaultIcons ) {
    return ( ) =>
      defaultIcons [ iconKey ] ( {
        class : 'pre-defined-class' ,
        // ... any other attributes
      } ) ;
  } ,
} ) ;

Verfügbare Symbole Sets

Icon Set	Paket	Zuletzt modifiziert
Akademiker	`@iconify-prerendered/vue-academicons`	28. September 2024
Akar -Ikonen	`@iconify-prerendered/vue-akar-icons`	4. August 2024
Ameisen -Design -Symbole	`@iconify-prerendered/vue-ant-design`	16. Dezember 2024
Arcticons	`@iconify-prerendered/vue-arcticons`	28. Dezember 2024
Basilikum	`@iconify-prerendered/vue-basil`	4. August 2024
Bitcoin -Symbole	`@iconify-prerendered/vue-bitcoin-icons`	4. August 2024
Bootstrap -Symbole	`@iconify-prerendered/vue-bi`	5. Januar 2024
Boxicons	`@iconify-prerendered/vue-bx`	4. August 2024
Boxicons Logo	`@iconify-prerendered/vue-bxl`	4. August 2024
Boxicons Solid	`@iconify-prerendered/vue-bxs`	4. August 2024
Bpmn	`@iconify-prerendered/vue-bpmn`	4. August 2024
Brandico	`@iconify-prerendered/vue-brandico`	4. August 2024
Bytesize -Ikonen	`@iconify-prerendered/vue-bytesize`	4. August 2024
Kohlenstoff	`@iconify-prerendered/vue-carbon`	26. Oktober 2024
Catppuccin -Ikonen	`@iconify-prerendered/vue-catppuccin`	3. Dezember 2024
Charme -Symbole	`@iconify-prerendered/vue-charm`	4. August 2024
Kreisflaggen	`@iconify-prerendered/vue-circle-flags`	12. Dezember 2024
Umgehende Ikonen	`@iconify-prerendered/vue-circum`	22. April 2024
Klarheit	`@iconify-prerendered/vue-clarity`	3. Juni 2024
Codex -Symbole	`@iconify-prerendered/vue-codex`	27. Dezember 2024
Codicons	`@iconify-prerendered/vue-codicon`	12. Dezember 2024
Coolicons	`@iconify-prerendered/vue-ci`	4. August 2024
CoreUi Marken	`@iconify-prerendered/vue-cib`	25. Juli 2024
CoreUi -Flaggen	`@iconify-prerendered/vue-cif`	25. Juli 2024
Coreui frei	`@iconify-prerendered/vue-cil`	25. Juli 2024
Covid -Ikonen	`@iconify-prerendered/vue-covid`	4. August 2024
Kryptowährungs -Farbsymbole	`@iconify-prerendered/vue-cryptocurrency-color`	4. August 2024
Kryptowährungssymbole	`@iconify-prerendered/vue-cryptocurrency`	4. August 2024
CSS.GG	`@iconify-prerendered/vue-gg`	4. August 2024
Cuida -Ikonen	`@iconify-prerendered/vue-cuida`	3. Oktober 2024
Benutzerdefinierte Markensymbole	`@iconify-prerendered/vue-cbi`	19. November 2024
Dashicons	`@iconify-prerendered/vue-dashicons`	27. Mai 2024
Devicon	`@iconify-prerendered/vue-devicon`	26. Dezember 2024
Devicon Plain	`@iconify-prerendered/vue-devicon-plain`	26. Dezember 2024
Duoicons	`@iconify-prerendered/vue-duo-icons`	28. September 2024
Elegant	`@iconify-prerendered/vue-et`	4. August 2024
Element Plus	`@iconify-prerendered/vue-ep`	11. März 2024
Schwer fassbare Ikonen	`@iconify-prerendered/vue-el`	4. August 2024
Emoji eins (farbig)	`@iconify-prerendered/vue-emojione`	4. August 2024
Emoji ein (monoton)	`@iconify-prerendered/vue-emojione-monotone`	4. August 2024
Emoji One (v1)	`@iconify-prerendered/vue-emojione-v1`	4. August 2024
Entypo+	`@iconify-prerendered/vue-entypo`	4. August 2024
Entypo+ sozial	`@iconify-prerendered/vue-entypo-social`	4. August 2024
EOS -Ikonen	`@iconify-prerendered/vue-eos-icons`	4. August 2024
Eva -Ikonen	`@iconify-prerendered/vue-eva`	4. August 2024
Böse Ikonen	`@iconify-prerendered/vue-ei`	4. August 2024
Famicons	`@iconify-prerendered/vue-famicons`	27. Dezember 2024
Feder -Ikone	`@iconify-prerendered/vue-fe`	4. August 2024
Feder -Ikonen	`@iconify-prerendered/vue-feather`	4. August 2024
Dateisymbole	`@iconify-prerendered/vue-file-icons`	17. Juli 2024
Firefox OS Emoji	`@iconify-prerendered/vue-fxemoji`	4. August 2024
Flag -Symbole	`@iconify-prerendered/vue-flag`	7. Oktober 2024
Flagpack	`@iconify-prerendered/vue-flagpack`	4. August 2024
Flache Farbsymbole	`@iconify-prerendered/vue-flat-color-icons`	4. August 2024
Flache UI -Ikonen	`@iconify-prerendered/vue-flat-ui`	4. August 2024
Flowbite -Symbole	`@iconify-prerendered/vue-flowbite`	11. Oktober 2024
Fließendem Emoji	`@iconify-prerendered/vue-fluent-emoji`	3. Oktober 2024
Fließend Emoji flach	`@iconify-prerendered/vue-fluent-emoji-flat`	3. Oktober 2024
Fließender Emoji hoher Kontrast	`@iconify-prerendered/vue-fluent-emoji-high-contrast`	3. Oktober 2024
Fluent UI Mdl2	`@iconify-prerendered/vue-fluent-mdl2`	7. April 2024
Fluent UI -System Farbsymbole	`@iconify-prerendered/vue-fluent-color`	16. Dezember 2024
Fließende UI -System -Symbole	`@iconify-prerendered/vue-fluent`	16. Dezember 2024
Schriftart fantastisch 4	`@iconify-prerendered/vue-fa`	11. Dezember 2023
Schriftart großartig 5 Marken	`@iconify-prerendered/vue-fa-brands`	4. August 2024
Schriftart großartig 5 regulär	`@iconify-prerendered/vue-fa-regular`	4. August 2024
Schriftart fantastisch 5 Solid	`@iconify-prerendered/vue-fa-solid`	4. August 2024
Schriftart großartige Marken	`@iconify-prerendered/vue-fa6-brands`	17. Dezember 2024
Schriftart großartig regulär	`@iconify-prerendered/vue-fa6-regular`	19. November 2024
Schriftart fantastisch Solid	`@iconify-prerendered/vue-fa6-solid`	19. November 2024
Schriftart	`@iconify-prerendered/vue-gis`	1. August 2024
Fontaudio	`@iconify-prerendered/vue-fad`	4. August 2024
Fontelico	`@iconify-prerendered/vue-fontelico`	4. August 2024
Fontisto	`@iconify-prerendered/vue-fontisto`	4. August 2024
Formkit -Symbole	`@iconify-prerendered/vue-formkit`	9. April 2024
Stiftung	`@iconify-prerendered/vue-foundation`	4. August 2024
Framework7 -Symbole	`@iconify-prerendered/vue-f7`	4. August 2024
Gala -Ikonen	`@iconify-prerendered/vue-gala`	26. November 2023
Spielikonen	`@iconify-prerendered/vue-game-icons`	7. April 2024
Garten -SVG -Ikonen	`@iconify-prerendered/vue-garden`	27. Dezember 2024
Geoglyphen	`@iconify-prerendered/vue-geo`	4. August 2024
Gitlab Svgs	`@iconify-prerendered/vue-pajamas`	14. November 2024
Google -Material -Symbole	`@iconify-prerendered/vue-ic`	4. August 2024
Schwerkraft UI -Ikonen	`@iconify-prerendered/vue-gravity-ui`	16. Dezember 2024
Gridicons	`@iconify-prerendered/vue-gridicons`	4. August 2024
Grommeten -Ikonen	`@iconify-prerendered/vue-grommet-icons`	27. Mai 2024
Anleitung	`@iconify-prerendered/vue-guidance`	4. August 2024
Gesundheitsikonen	`@iconify-prerendered/vue-healthicons`	28. Dezember 2024
Helden	`@iconify-prerendered/vue-heroicons`	25. Juli 2024
Heroicons V1 Umriss	`@iconify-prerendered/vue-heroicons-outline`	4. August 2024
Heroicons V1 Solid	`@iconify-prerendered/vue-heroicons-solid`	4. August 2024
Riesige Ikonen	`@iconify-prerendered/vue-hugeicons`	21. Dezember 2024
Humbleicons	`@iconify-prerendered/vue-humbleicons`	23. Dezember 2024
ICalicons	`@iconify-prerendered/vue-il`	11. Dezember 2023
IComoon frei	`@iconify-prerendered/vue-icomoon-free`	4. August 2024
Ikonamoon	`@iconify-prerendered/vue-iconamoon`	4. August 2024
Ikonoir	`@iconify-prerendered/vue-iconoir`	28. Dezember 2024
Iconpark	`@iconify-prerendered/vue-icon-park`	26. November 2023
ICONPARK -Umriss	`@iconify-prerendered/vue-icon-park-outline`	4. August 2024
Iconpark Solid	`@iconify-prerendered/vue-icon-park-solid`	4. August 2024
IConpark twotone	`@iconify-prerendered/vue-icon-park-twotone`	4. August 2024
Icons8 Windows 10 -Symbole	`@iconify-prerendered/vue-icons8`	4. August 2024
Icons8 Windows 8 -Symbole	`@iconify-prerendered/vue-wpf`	4. August 2024
Innowatio Schriftart	`@iconify-prerendered/vue-iwwa`	4. August 2024
Ionicons	`@iconify-prerendered/vue-ion`	2. Mai 2024
Jam -Ikonen	`@iconify-prerendered/vue-jam`	4. August 2024
Los Ikonen	`@iconify-prerendered/vue-lets-icons`	4. August 2024
Ligatursymbole	`@iconify-prerendered/vue-ls`	4. August 2024
Linie großartig	`@iconify-prerendered/vue-la`	4. August 2024
Lineeicons	`@iconify-prerendered/vue-lineicons`	26. Oktober 2024
Lsicon	`@iconify-prerendered/vue-lsicon`	3. Oktober 2024
Lucide	`@iconify-prerendered/vue-lucide`	21. Dezember 2024
Lucide Lab	`@iconify-prerendered/vue-lucide-lab`	9. November 2024
Magierikonen	`@iconify-prerendered/vue-mage`	4. August 2024
Majestätische	`@iconify-prerendered/vue-majesticons`	4. August 2024
Maki	`@iconify-prerendered/vue-maki`	16. Dezember 2024
Kartensymbole	`@iconify-prerendered/vue-map`	4. August 2024
Vermarkter	`@iconify-prerendered/vue-marketeq`	4. April 2024
Kuldische Schriftart für Materialdesign	`@iconify-prerendered/vue-zmdi`	11. Dezember 2023
Materialdesign -Symbole	`@iconify-prerendered/vue-mdi`	20. Juni 2024
Material Design Light	`@iconify-prerendered/vue-mdi-light`	4. August 2024
Materialliniensymbole	`@iconify-prerendered/vue-line-md`	9. Dezember 2024
Materialsymbole	`@iconify-prerendered/vue-material-symbols`	6. Dezember 2024
Materialsymbole Licht	`@iconify-prerendered/vue-material-symbols-light`	6. Dezember 2024
Medizinische Ikonen	`@iconify-prerendered/vue-medical-icon`	4. August 2024
Speichersymbole	`@iconify-prerendered/vue-memory`	2. Januar 2024
Meteocons	`@iconify-prerendered/vue-meteocons`	1. Juli 2024
Meteor -Ikonen	`@iconify-prerendered/vue-meteor-icons`	9. November 2024
Mingcute -Symbol	`@iconify-prerendered/vue-mingcute`	23. Dezember 2024
Mono -Ikonen	`@iconify-prerendered/vue-mi`	4. August 2024
Mono -Ikonen	`@iconify-prerendered/vue-mono-icons`	4. August 2024
Myna Ui -Ikonen	`@iconify-prerendered/vue-mynaui`	25. November 2024
Nimbus	`@iconify-prerendered/vue-nimbus`	4. August 2024
Nicht -INS	`@iconify-prerendered/vue-nonicons`	16. Dezember 2024
Noto Emoji	`@iconify-prerendered/vue-noto`	7. Oktober 2024
Noto Emoji (v1)	`@iconify-prerendered/vue-noto-v1`	4. August 2024
NRK -Kernikonen	`@iconify-prerendered/vue-nrk`	14. November 2024
Okticons	`@iconify-prerendered/vue-octicon`	6. Dezember 2024
Ooui	`@iconify-prerendered/vue-ooui`	21. Dezember 2024
Offen Ikone	`@iconify-prerendered/vue-oi`	4. August 2024
OpenMoji	`@iconify-prerendered/vue-openmoji`	23. Oktober 2024
OpenSearch UI	`@iconify-prerendered/vue-oui`	2. November 2024
Pepicons	`@iconify-prerendered/vue-pepicons`	2. Januar 2023
Pepicons Bleistift	`@iconify-prerendered/vue-pepicons-pencil`	4. August 2024
Pepicons Pop!	`@iconify-prerendered/vue-pepicons-pop`	4. August 2024
Pepicons Druck	`@iconify-prerendered/vue-pepicons-print`	4. August 2024
Phosphor	`@iconify-prerendered/vue-ph`	6. Mai 2024
Pixelarticons	`@iconify-prerendered/vue-pixelarticons`	18. April 2024
Prestashop -Symbole	`@iconify-prerendered/vue-ps`	4. August 2024
Hauptikonen	`@iconify-prerendered/vue-prime`	9. Mai 2024
Proicons	`@iconify-prerendered/vue-proicons`	16. Dezember 2024
Qlementine -Symbole	`@iconify-prerendered/vue-qlementine-icons`	25. November 2024
Quills -Symbole	`@iconify-prerendered/vue-quill`	4. August 2024
Radix -Symbole	`@iconify-prerendered/vue-radix-icons`	4. August 2024
Raphael	`@iconify-prerendered/vue-raphael`	4. August 2024
Remix -Symbol	`@iconify-prerendered/vue-ri`	17. Dezember 2024
Nietikonen	`@iconify-prerendered/vue-rivet-icons`	20. Juni 2024
Sargam -Ikonen	`@iconify-prerendered/vue-si`	8. Oktober 2024
Siemens Industrial Experience Icons	`@iconify-prerendered/vue-ix`	9. November 2024
Einfache Ikonen	`@iconify-prerendered/vue-simple-icons`	23. Dezember 2024
Einfache Zeilensymbole	`@iconify-prerendered/vue-simple-line-icons`	4. August 2024
Skillsymbole	`@iconify-prerendered/vue-skill-icons`	17. Juli 2024
Smarticons Glyphe	`@iconify-prerendered/vue-si-glyph`	4. August 2024
Solar	`@iconify-prerendered/vue-solar`	4. August 2024
Stash -Symbole	`@iconify-prerendered/vue-stash`	8. Oktober 2024
Rationalisieren	`@iconify-prerendered/vue-streamline`	4. August 2024
Stropiere Emojis	`@iconify-prerendered/vue-streamline-emojis`	4. August 2024
U -Bahn -Symbol Set	`@iconify-prerendered/vue-subway`	3. Juni 2024
SVG -Logos	`@iconify-prerendered/vue-logos`	3. Oktober 2024
SVG Spinner	`@iconify-prerendered/vue-svg-spinners`	15. Januar 2023
System UICons	`@iconify-prerendered/vue-system-uicons`	4. August 2024
Tabler -Symbole	`@iconify-prerendered/vue-tabler`	16. Dezember 2024
TDesign -Symbole	`@iconify-prerendered/vue-tdesign`	28. November 2024
Teenyicons	`@iconify-prerendered/vue-teenyicons`	4. August 2024
Topcoat -Symbole	`@iconify-prerendered/vue-topcoat`	4. August 2024
Twitter Emoji	`@iconify-prerendered/vue-twemoji`	4. August 2024
Typicons	`@iconify-prerendered/vue-typcn`	4. August 2024
UIW -Ikonen	`@iconify-prerendered/vue-uiw`	24. Juni 2024
Unicons	`@iconify-prerendered/vue-uil`	17. Dezember 2024
Unicons monochrom	`@iconify-prerendered/vue-uim`	17. Dezember 2024
Unicons fest	`@iconify-prerendered/vue-uis`	17. Dezember 2024
Unicons dünne Linie	`@iconify-prerendered/vue-uit`	17. Dezember 2024
UNJS -Logos	`@iconify-prerendered/vue-unjs`	17. Juli 2024
Vaadin -Ikonen	`@iconify-prerendered/vue-vaadin`	4. August 2024
Vesper -Symbole	`@iconify-prerendered/vue-vs`	11. Dezember 2023
VSCODE -Symbole	`@iconify-prerendered/vue-vscode-icons`	16. Dezember 2024
Wettersymbole	`@iconify-prerendered/vue-wi`	4. August 2024
Websymbole Liga	`@iconify-prerendered/vue-websymbol`	11. Dezember 2023
Web3 -Symbole	`@iconify-prerendered/vue-token`	19. Dezember 2024
Web3 -Symbole Marken	`@iconify-prerendered/vue-token-branded`	19. Dezember 2024
Webhostinghub -Glyphen	`@iconify-prerendered/vue-whh`	4. August 2024
Weui Ikone	`@iconify-prerendered/vue-weui`	20. Juni 2024
Zondicons	`@iconify-prerendered/vue-zondicons`	4. August 2024

Lizenz

Der Code zum Generieren der Symbolsätze wird unter der MIT -Lizenz verteilt. Das Symbol setzt selbst unter der Lizenz ihres Autors.

Entwicklungsaufbau

Deno installieren.
Leiten Sie deno task generate um alle Sammlungen zu generieren. Parameter:
- --version oder -v geben die Versionsbasis für generierte Pakete an. Optional.
- --prefix oder -p geben mit einer Sammlung an, um zu generieren. Vielleicht mehrmals. Optional.
- --no-replace-ids Deaktivieren Sie das Ersetzen von IDs. Für einen Testfall erforderlich. Optional.
- --output oder -o -Verzeichnis, um generierte Dateien zu platzieren. Optional.
Führen Sie deno task test für alle Tests aus. Weitere Informationen zum Test laufen.

Benchmarking

Sie können zwei Versionen von Icon -Sets verbieten. Um das zu tun:

Generieren Sie das Basis -Symbol, das von Befehl festgelegt ist: deno task generate -p=fluent-emoji -o=benckmarks/generated/baseline
Änderungen am Erzeugungsprozess oder was auch immer vornehmen
Generieren Sie das getestete Symbol, das von Befehl festgelegt ist: deno task generate -p=fluent-emoji -o=benckmarks/generated/test
Laufen Sie Benchmark von deno bench --allow-env
Gehen Sie zu Schritt 2

Expandieren