MENU
  • このブログに関して
  • 特集アーカイブ
    • Windows更新情報
    • Windows11使いこなし
    • Windows 10使いこなし
    • macOS/iOS/iPadOS更新情報
    • macOS使いこなし
    • iOS使いこなし
    • Webブラウザ更新情報
  • ソフトウェア
  • Windows
  • Mac
  • iOS
  • セール
PCやMacの性能を100%発揮
ソフトアンテナ
  • このブログに関して
  • 特集アーカイブ
    • Windows更新情報
    • Windows11使いこなし
    • Windows 10使いこなし
    • macOS/iOS/iPadOS更新情報
    • macOS使いこなし
    • iOS使いこなし
    • Webブラウザ更新情報
  • ソフトウェア
  • Windows
  • Mac
  • iOS
  • セール
ソフトアンテナ
  • このブログに関して
  • 特集アーカイブ
    • Windows更新情報
    • Windows11使いこなし
    • Windows 10使いこなし
    • macOS/iOS/iPadOS更新情報
    • macOS使いこなし
    • iOS使いこなし
    • Webブラウザ更新情報
  • ソフトウェア
  • Windows
  • Mac
  • iOS
  • セール
  1. ホーム
  2. レビュー
  3. Vivid.js - 90上のアイコンを収録し自由自在にカスタマイズ可能なアイコンライブラリ

Vivid.js - 90上のアイコンを収録し自由自在にカスタマイズ可能なアイコンライブラリ

2018 6/18
レビュー
2018年6月18日 2018年6月18日
  • URLをコピーしました!

S 20180613 105058

現在は多くのユーザーがスマートフォンやタブレットを使用しており、Webサイト側ではさまざまな解像度のディスプレイを考慮する必要があります。

本日紹介する「Vivid.js」はそんな環境にも対応できる、サイズや色を自由自在に変更できるカスタマイズ性の高いJavaScriptアイコンライブラリです。

Webkul Softwareによって作成され、MITライセンスのもと公開されているオープンソースソフトで、svg形式のアイコンをWebサイトに埋め込むことができます。

以下使用方法を説明します。

目次

Vivid.jsのインストール

Vivid.jsを使用する方法は公式ドキュメントで詳しく説明されています。

これによるとCDNを利用するのが一番簡単で、その場合HTMLに以下の行を追加するだけで準備完了です。

<script src="https://unpkg.com/vivid-icons@1.0.2/dist/vivid-icons.min.js" type="text/javascript"></script>

またはパッケージマネージャを利用してインストールすることもできます。

npmを使用する場合。

npm install vivid-icons

bowerを使用する場合。

bower install vivid-icons

Vivid.jsの使用方法

アイコンを単に表示する場合「<i data-vi="icon-name"></i>」を使用します。

S 20180613 111802

▲"doc"を指定するとドキュメントアイコンが表示されました。アイコンの名前として指定できる文字列は、チートシートで確認可能です。

S 20180613 105158

▲"badge"や"bottle"、"building"、"calendar"など分かりやすい名前が使用できることがわかります。

サイズを変更する場合、上記のタグに「data-vi-size="number"」属性を追加します。

S 20180613 111813

▲"96"を指定すると何も指定しない場合よりアイコンが大きなサイズで表示されます。

プライマリカラー、アクセントカラー、プロップカラーを設定することもできます。それぞれ「data-vi-primary="#hexcode"」「data-vi-accent="#hexcode"」「data-vi-prop="#hexcode"」を追加します。

S 20180613 112348

▲アイコンの各部の色が変更されました。

まとめ

Vivid.jsは無料で利用できるカスタマイズ可能なJavaScriptアイコンライブラリです。開発元ではアイコンのリクエストも受けつけているそうです。目的のアイコンが見つからない場合、新たに追加してくれるよう要望を出してみても良いかもしれません。

レビュー
Icon JavaScript
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
  • 大きな盤面のアラーム時計ウィジェット「Alarm Clock for Desktop」がセール価格となった本日のアプリセールまとめ
  • StackSocial、Yummy FTP Pro 2など10個のアプリを格安で販売する「Pay What You Want」セールを開催中

関連記事

  • stail.sh - 標準入力の最後のn行を継続的に表示する事ができるユーティリティ
    2023年2月2日
  • git-sim - 自分のリポジトリでGit操作可視化
    2023年1月31日
  • Carbonyl - ターミナル内で実行できるChromiumブラウザ
    2023年1月30日
  • PowerToys: PowerRename - 複数のファイルをまとめてリネームすることができるユーティリティ
    2023年1月27日
  • HiDock - ディスプレイ構成ごとにDockの設定を保存できるフリーソフト
    2023年1月26日
  • Lickable Menu Bar - 懐かしのメニューバースタイルを最新のmacOSで再現
    2023年1月20日
  • Homerow - macOSをキーボードだけでプロのように操作することができるユーティリティ
    2023年1月6日
  • ExplorerPatcher - Windows 11のタスクバーをWindows 10風に変換することができるツール
    2023年1月5日
スポンサーリンク
サイト内検索
特集アーカイブ
  • Windows更新情報
  • Windows11使いこなし
  • Windows 10使いこなし
  • macOS/iOS/iPadOS更新情報
  • macOS使いこなし
  • iOS使いこなし
  • Webブラウザ更新情報
Feedlyに登録

登録お願いします!

follow us in feedly

人気記事
  • Lp logo 3 1000x657 質問に対し流暢な日本語で回答してくれる「ChatGPT」が公開 - 試し方はこちら
  • S 20230125 112030 Microsoft Edgeに「ウィンドウの分割」機能が導入。2つのページを同時に閲覧可能に
  • S 20221123 111042 Windows 11のタスクトレイ時計の秒表示を有効にする方法
  • S 20221206 204658 メニューバーから対話できる「ChatGPT for Mac」がリリース
  • S 20210923 114221 Windows 11で「管理ツール」を開く方法
  • S 20220219 172234 【Tips】iPhoneで撮影した特定の写真だけをiCloudに保存する方法
  • Img3File M1/M2/Intel MacでWindows 11を実行できる「UTM 4.1」
  • S 20230127 111050 Windows 11 Version 22H2用のプレビューアップデートKB5022360が公開 - タスクバー検索やIMEの不具合修正
  • Mac mini M2 2023 【悲報】M2搭載ローエンドMac miniとMacBook ProのSSD速度は前世代より低下
  • S 20230119 111028 Microsoft、Windows 11 22H2でシステムの復元ポイントがアプリを破壊する事を確認
カテゴリー
タグ
Amazon Android App Apple applewatch appsale Chrome Edge Firefox Git Github Google iOS iPad ipados iPhone iPhone6 iphone7 iphone8 iTunes JavaScript Kindle Linux Mac MacBook MacBookPro macos Microsoft Nintendo OS X OSX Parallels Rails Ruby Sale Steam Swift Twitter VMware Windows windows7 windows10 windows11 Wine Yosemite
新着記事
  • AmazonでiPad Airが14%OFFになるタイムセールが実施中
  • 【悲報】Twitter APIの無償提供が2月9日に完全終了【更新】
  • あらゆる画像をベクター形式に変換できる「Super Vectorizer」がセール中の本日のアプリセールまとめ
src256
ソフトアンテナを開発しています。

Windows/Mac/Linux全部使用中。ソフトウェア、ハードウェアいろいろなモノに興味があります。

好きなエディタはEmacs。好きな言語はRubyです。


srcw.net
  • プライバシーポリシー

© 2022 ソフトアンテナ

目次