ホーム>プログラミング関連>サードパーティ製コンポーネント
ダウンロード

[！重要]このプロジェクトは、ウクライナの開発者によって維持されていますか？

私は最善を尽くしていますが、ロシアが継続しているウクライナへの本格的な侵略のために、私はオープンソースプロジェクトをサポートするエネルギーをほとんど持っていません。

私の仕事があなたに役立つなら、ウクライナや私を個人的に支援することを検討してください。あなたの$ 1にも影響があります！

@Iconify-Prerendered

依存関係がゼロのVUE用のスーパーセットスタンドアロンアイコンコンポーネント。使いやすさと高性能のために設計されています。

特徴

  • 使いやすい
    • プラグインは必要ありません！任意のビルドツールと互換性があります。
    • IDE Auto Completion（DEMO）との最適な互換性のために設計されています。
    • ゼロ依存関係。
    • SSR / SSGフレンドリー。
    • タイプスクリプトサポート。
    • すべてのアイコンセットにわたるUnified API。
  • 高性能
    • フォント、CSS、画像などの外部リソースは必要ありません。
    • アイコンコードはバンドルに埋め込まれています。
    • ツリーの揺れをサポートするため、使用したアイコンのみがバンドルに含まれます。
    • オフラインで動作します。
  • Iconifyを搭載しています。

ライブデモ：https：//stackblitz.com/edit/iconify-prerendered-demo?file=src%2Fapp.vue

インストール

適切なアイコンセットをインストールします

 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

使用法

通常のようなセットからアイコンコンポーネントをインポートします。 

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

これらの3つのアイコンのみがバンドルに含まれます。あなたのバンドラーは、他のすべてのアイコンを揺さぶるかもしれません。

必要なのはそれだけです。プラグイン、追加の構成、IDE拡張機能、または何か他のものはありません。

アイコンのデフォルト属性をカスタマイズします

デフォルトでは、すべてのアイコンには2つの属性のみがあります。 role="img"とaria-hidden="true" 。これらの属性を自由に再定義したり、各アイコンに新しい属性を追加したりしますが、 classやstyleなどの特定の属性をセット内のすべてのアイコンに適用することをお勧めします。

これを実現するには、 new Proxyを介してアイコンを再輸出し、デフォルトの属性を含めることができます

 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
      } ) ;
  } ,
} ) ;

利用可能なアイコンセット

アイコンセットパッケージ最後に変更されました
アカデミック@iconify-prerendered/vue-academicons 2024年9月28日
Akarアイコン@iconify-prerendered/vue-akar-icons 2024年8月4日
アリのデザインアイコン@iconify-prerendered/vue-ant-design 2024年12月16日
アークティコン@iconify-prerendered/vue-arcticons 2024年12月28日
バジル@iconify-prerendered/vue-basil 2024年8月4日
ビットコインアイコン@iconify-prerendered/vue-bitcoin-icons 2024年8月4日
ブートストラップアイコン@iconify-prerendered/vue-bi 2024年1月5日
ボクシコン@iconify-prerendered/vue-bx 2024年8月4日
ボシコンのロゴ@iconify-prerendered/vue-bxl 2024年8月4日
ボクシコンソリッド@iconify-prerendered/vue-bxs 2024年8月4日
BPMN @iconify-prerendered/vue-bpmn 2024年8月4日
ブランディコ@iconify-prerendered/vue-brandico 2024年8月4日
バイトアイコン@iconify-prerendered/vue-bytesize 2024年8月4日
炭素@iconify-prerendered/vue-carbon 2024年10月26日
catppuccinアイコン@iconify-prerendered/vue-catppuccin 2024年12月3日
チャームアイコン@iconify-prerendered/vue-charm 2024年8月4日
サークルフラグ@iconify-prerendered/vue-circle-flags 2024年12月12日
回転アイコン@iconify-prerendered/vue-circum 2024年4月22日
明確さ@iconify-prerendered/vue-clarity 2024年6月3日
コーデックスコン@iconify-prerendered/vue-codex 2024年12月27日
コードコン@iconify-prerendered/vue-codicon 2024年12月12日
クーリコン@iconify-prerendered/vue-ci 2024年8月4日
Coreuiブランド@iconify-prerendered/vue-cib 2024年7月25日
Coreuiフラグ@iconify-prerendered/vue-cif 2024年7月25日
Coreui無料@iconify-prerendered/vue-cil 2024年7月25日
コビッドアイコン@iconify-prerendered/vue-covid 2024年8月4日
暗号通貨の色アイコン@iconify-prerendered/vue-cryptocurrency-color 2024年8月4日
暗号通貨アイコン@iconify-prerendered/vue-cryptocurrency 2024年8月4日
css.gg @iconify-prerendered/vue-gg 2024年8月4日
クイダアイコン@iconify-prerendered/vue-cuida 2024年10月3日
カスタムブランドアイコン@iconify-prerendered/vue-cbi 2024年11月19日
ダシコン@iconify-prerendered/vue-dashicons 2024年5月27日
Devicon @iconify-prerendered/vue-devicon 2024年12月26日
Devicon Plain @iconify-prerendered/vue-devicon-plain 2024年12月26日
デュオイコン@iconify-prerendered/vue-duo-icons 2024年9月28日
エレガント@iconify-prerendered/vue-et 2024年8月4日
要素プラス@iconify-prerendered/vue-ep 2024年3月11日
とらえどころのないアイコン@iconify-prerendered/vue-el 2024年8月4日
絵文字ワン（色） @iconify-prerendered/vue-emojione 2024年8月4日
絵文字1（単調） @iconify-prerendered/vue-emojione-monotone 2024年8月4日
絵文字ワン（v1） @iconify-prerendered/vue-emojione-v1 2024年8月4日
Entypo+ @iconify-prerendered/vue-entypo 2024年8月4日
Entypo+ソーシャル@iconify-prerendered/vue-entypo-social 2024年8月4日
EOSアイコン@iconify-prerendered/vue-eos-icons 2024年8月4日
EVAアイコン@iconify-prerendered/vue-eva 2024年8月4日
邪悪なアイコン@iconify-prerendered/vue-ei 2024年8月4日
ファミコン@iconify-prerendered/vue-famicons 2024年12月27日
フェザーアイコン@iconify-prerendered/vue-fe 2024年8月4日
フェザーアイコン@iconify-prerendered/vue-feather 2024年8月4日
ファイルアイコン@iconify-prerendered/vue-file-icons 2024年7月17日
Firefox OS絵文字@iconify-prerendered/vue-fxemoji 2024年8月4日
フラグアイコン@iconify-prerendered/vue-flag 2024年10月7日
フラッグパック@iconify-prerendered/vue-flagpack 2024年8月4日
フラットカラーアイコン@iconify-prerendered/vue-flat-color-icons 2024年8月4日
フラットUIアイコン@iconify-prerendered/vue-flat-ui 2024年8月4日
フローバイトアイコン@iconify-prerendered/vue-flowbite 2024年10月11日
流emoji @iconify-prerendered/vue-fluent-emoji 2024年10月3日
流emojiフラット@iconify-prerendered/vue-fluent-emoji-flat 2024年10月3日
流emojiハイコントラスト@iconify-prerendered/vue-fluent-emoji-high-contrast 2024年10月3日
Fluent UI MDL2 @iconify-prerendered/vue-fluent-mdl2 2024年4月7日
流fluent UIシステムカラーアイコン@iconify-prerendered/vue-fluent-color 2024年12月16日
Fluent UIシステムアイコン@iconify-prerendered/vue-fluent 2024年12月16日
フォント素晴らしい4 @iconify-prerendered/vue-fa 2023年12月11日
Font Awesome 5ブランド@iconify-prerendered/vue-fa-brands 2024年8月4日
フォント素晴らしい5レギュラー@iconify-prerendered/vue-fa-regular 2024年8月4日
フォント素晴らしい5ソリッド@iconify-prerendered/vue-fa-solid 2024年8月4日
フォント素晴らしいブランド@iconify-prerendered/vue-fa6-brands 2024年12月17日
フォント素晴らしいレギュラー@iconify-prerendered/vue-fa6-regular 2024年11月19日
フォント素晴らしいソリッド@iconify-prerendered/vue-fa6-solid 2024年11月19日
font-gis @iconify-prerendered/vue-gis 2024年8月1日
フォンタウディオ@iconify-prerendered/vue-fad 2024年8月4日
fontelico @iconify-prerendered/vue-fontelico 2024年8月4日
fontisto @iconify-prerendered/vue-fontisto 2024年8月4日
フォームキットアイコン@iconify-prerendered/vue-formkit 2024年4月9日
財団@iconify-prerendered/vue-foundation 2024年8月4日
フレームワーク7アイコン@iconify-prerendered/vue-f7 2024年8月4日
ガラアイコン@iconify-prerendered/vue-gala 2023年11月26日
ゲームアイコン@iconify-prerendered/vue-game-icons 2024年4月7日
ガーデンSVGアイコン@iconify-prerendered/vue-garden 2024年12月27日
ジオグリフ@iconify-prerendered/vue-geo 2024年8月4日
gitlab svgs @iconify-prerendered/vue-pajamas 2024年11月14日
Googleマテリアルアイコン@iconify-prerendered/vue-ic 2024年8月4日
重力UIアイコン@iconify-prerendered/vue-gravity-ui 2024年12月16日
グリディコン@iconify-prerendered/vue-gridicons 2024年8月4日
グロメットアイコン@iconify-prerendered/vue-grommet-icons 2024年5月27日
ガイダンス@iconify-prerendered/vue-guidance 2024年8月4日
健康アイコン@iconify-prerendered/vue-healthicons 2024年12月28日
HeroIcons @iconify-prerendered/vue-heroicons 2024年7月25日
HeroIcons V1アウトライン@iconify-prerendered/vue-heroicons-outline 2024年8月4日
HeroIcons V1ソリッド@iconify-prerendered/vue-heroicons-solid 2024年8月4日
巨大なアイコン@iconify-prerendered/vue-hugeicons 2024年12月21日
謙虚な@iconify-prerendered/vue-humbleicons 2024年12月23日
アイカン@iconify-prerendered/vue-il 2023年12月11日
Icomoon無料@iconify-prerendered/vue-icomoon-free 2024年8月4日
iconamoon @iconify-prerendered/vue-iconamoon 2024年8月4日
Iconoir @iconify-prerendered/vue-iconoir 2024年12月28日
ICONPARK @iconify-prerendered/vue-icon-park 2023年11月26日
ICONPARKアウトライン@iconify-prerendered/vue-icon-park-outline 2024年8月4日
ICONPARKソリッド@iconify-prerendered/vue-icon-park-solid 2024年8月4日
ICONPARK TWOTONE @iconify-prerendered/vue-icon-park-twotone 2024年8月4日
Icons8 Windows 10アイコン@iconify-prerendered/vue-icons8 2024年8月4日
Icons8 Windows 8アイコン@iconify-prerendered/vue-wpf 2024年8月4日
Innowatioフォント@iconify-prerendered/vue-iwwa 2024年8月4日
イオニコン@iconify-prerendered/vue-ion 2024年5月2日
ジャムアイコン@iconify-prerendered/vue-jam 2024年8月4日
アイコンを許可します@iconify-prerendered/vue-lets-icons 2024年8月4日
結晶シンボル@iconify-prerendered/vue-ls 2024年8月4日
素晴らしいライン@iconify-prerendered/vue-la 2024年8月4日
ラインコン@iconify-prerendered/vue-lineicons 2024年10月26日
lsicon @iconify-prerendered/vue-lsicon 2024年10月3日
ルシド@iconify-prerendered/vue-lucide 2024年12月21日
Lucide Lab @iconify-prerendered/vue-lucide-lab 2024年11月9日
メイジのアイコン@iconify-prerendered/vue-mage 2024年8月4日
マジェスティックス@iconify-prerendered/vue-majesticons 2024年8月4日
マキ@iconify-prerendered/vue-maki 2024年12月16日
マップアイコン@iconify-prerendered/vue-map 2024年8月4日
Marketeq @iconify-prerendered/vue-marketeq 2024年4月4日
マテリアルデザインの象徴的なフォント@iconify-prerendered/vue-zmdi 2023年12月11日
マテリアルデザインアイコン@iconify-prerendered/vue-mdi 2024年6月20日
マテリアルデザインライト@iconify-prerendered/vue-mdi-light 2024年8月4日
マテリアルラインアイコン@iconify-prerendered/vue-line-md 2024年12月9日
マテリアルシンボル@iconify-prerendered/vue-material-symbols 2024年12月6日
物質的なシンボルライト@iconify-prerendered/vue-material-symbols-light 2024年12月6日
医療アイコン@iconify-prerendered/vue-medical-icon 2024年8月4日
メモリアイコン@iconify-prerendered/vue-memory 2024年1月2日
メトコン@iconify-prerendered/vue-meteocons 2024年7月1日
流星アイコン@iconify-prerendered/vue-meteor-icons 2024年11月9日
Mingcuteアイコン@iconify-prerendered/vue-mingcute 2024年12月23日
モノコン@iconify-prerendered/vue-mi 2024年8月4日
モノコン@iconify-prerendered/vue-mono-icons 2024年8月4日
Myna UIアイコン@iconify-prerendered/vue-mynaui 2024年11月25日
ニンバス@iconify-prerendered/vue-nimbus 2024年8月4日
ノンコン@iconify-prerendered/vue-nonicons 2024年12月16日
ノート絵文字@iconify-prerendered/vue-noto 2024年10月7日
ノート絵文字（V1） @iconify-prerendered/vue-noto-v1 2024年8月4日
NRKコアアイコン@iconify-prerendered/vue-nrk 2024年11月14日
オクティコン@iconify-prerendered/vue-octicon 2024年12月6日
ooui @iconify-prerendered/vue-ooui 2024年12月21日
象徴的なオープン@iconify-prerendered/vue-oi 2024年8月4日
OpenMoji @iconify-prerendered/vue-openmoji 2024年10月23日
OpenSearch UI @iconify-prerendered/vue-oui 2024年11月2日
ペピコン@iconify-prerendered/vue-pepicons 2023年1月2日
ペピコンペンシル@iconify-prerendered/vue-pepicons-pencil 2024年8月4日
Pepicons Pop！ @iconify-prerendered/vue-pepicons-pop 2024年8月4日
ペピコンプリント@iconify-prerendered/vue-pepicons-print 2024年8月4日
蛍光体@iconify-prerendered/vue-ph 2024年5月6日
Pixelarticons @iconify-prerendered/vue-pixelarticons 2024年4月18日
Prestashopアイコン@iconify-prerendered/vue-ps 2024年8月4日
プライムアイコン@iconify-prerendered/vue-prime 2024年5月9日
プロイコン@iconify-prerendered/vue-proicons 2024年12月16日
Qlementineアイコン@iconify-prerendered/vue-qlementine-icons 2024年11月25日
クイルアイコン@iconify-prerendered/vue-quill 2024年8月4日
ラディックスアイコン@iconify-prerendered/vue-radix-icons 2024年8月4日
ラファエル@iconify-prerendered/vue-raphael 2024年8月4日
リミックスアイコン@iconify-prerendered/vue-ri 2024年12月17日
リベットアイコン@iconify-prerendered/vue-rivet-icons 2024年6月20日
サルガムアイコン@iconify-prerendered/vue-si 2024年10月8日
Siemens Industrial Experienceアイコン@iconify-prerendered/vue-ix 2024年11月9日
単純なアイコン@iconify-prerendered/vue-simple-icons 2024年12月23日
シンプルなラインアイコン@iconify-prerendered/vue-simple-line-icons 2024年8月4日
スキルアイコン@iconify-prerendered/vue-skill-icons 2024年7月17日
Smarticons Glyph @iconify-prerendered/vue-si-glyph 2024年8月4日
太陽@iconify-prerendered/vue-solar 2024年8月4日
隠しアイコン@iconify-prerendered/vue-stash 2024年10月8日
合理化@iconify-prerendered/vue-streamline 2024年8月4日
絵文字を合理化します@iconify-prerendered/vue-streamline-emojis 2024年8月4日
地下鉄のアイコンセット@iconify-prerendered/vue-subway 2024年6月3日
SVGロゴ@iconify-prerendered/vue-logos 2024年10月3日
SVGスピナー@iconify-prerendered/vue-svg-spinners 2023年1月15日
システムuicons @iconify-prerendered/vue-system-uicons 2024年8月4日
タブラーアイコン@iconify-prerendered/vue-tabler 2024年12月16日
tdesignアイコン@iconify-prerendered/vue-tdesign 2024年11月28日
Teenyycons @iconify-prerendered/vue-teenyicons 2024年8月4日
トップコートアイコン@iconify-prerendered/vue-topcoat 2024年8月4日
Twitter絵文字@iconify-prerendered/vue-twemoji 2024年8月4日
典型@iconify-prerendered/vue-typcn 2024年8月4日
UIWアイコン@iconify-prerendered/vue-uiw 2024年6月24日
ユニコン@iconify-prerendered/vue-uil 2024年12月17日
ユニコンモノクロ@iconify-prerendered/vue-uim 2024年12月17日
ユニコンソリッド@iconify-prerendered/vue-uis 2024年12月17日
ユニコンの細い線@iconify-prerendered/vue-uit 2024年12月17日
UNJSロゴ@iconify-prerendered/vue-unjs 2024年7月17日
Vaadinアイコン@iconify-prerendered/vue-vaadin 2024年8月4日
Vesperアイコン@iconify-prerendered/vue-vs 2023年12月11日
vscodeアイコン@iconify-prerendered/vue-vscode-icons 2024年12月16日
天気アイコン@iconify-prerendered/vue-wi 2024年8月4日
ウェブシンボルリーガ@iconify-prerendered/vue-websymbol 2023年12月11日
Web3アイコン@iconify-prerendered/vue-token 2024年12月19日
ブランド化されたWeb3アイコン@iconify-prerendered/vue-token-branded 2024年12月19日
webhostinghubグリフ@iconify-prerendered/vue-whh 2024年8月4日
weuiアイコン@iconify-prerendered/vue-weui 2024年6月20日
Zondicons @iconify-prerendered/vue-zondicons 2024年8月4日

ライセンス

アイコンセットを生成するためのコードは、MITライセンスの下で配布されます。アイコンセット自体は、著者のライセンスの下に配布されます。

開発セットアップ

  1. Denoをインストールします。
  2. すべてのコレクションを生成するためにdeno task generate 。パラメーション：
    • --versionまたは-v生成されたパッケージのバージョンベースを指定します。オプション。
    • --prefixまたは-p生成するコレクションで指定します。多分何度も。オプション。
    • --no-replace-ids IDの交換を無効にします。テストケースに必要です。オプション。
    • --outputまたは-oディレクトリ生成されたファイルを配置する。オプション。
  3. すべてのテストを実行するためにdeno task testを実行します。テストランニングの詳細をご覧ください。

ベンチマーク

アイコンセットの2つのバージョンをベンチマークできます。それをするために：

  1. コマンドによって設定されたベースラインアイコンの生成： deno task generate -p=fluent-emoji -o=benckmarks/generated/baseline
  2. 生成プロセスなどに変更を加えます
  3. コマンドによって設定されたテストアイコンを生成： deno task generate -p=fluent-emoji -o=benckmarks/generated/test
  4. deno bench --allow-envによるベンチマークを実行します
  5. ステップ＃2に進みます
拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて