Web アプリで SVG ファイルアイコンを気軽に使用したいなら！「Lucide」
概要
Web アプリを開発している皆さんの中には、SVG ファイルを使用してアプリを開発したいという方は少なくないのではないでしょうか？
実際自分も、ズームした際も綺麗に画像が表示される SVG ファイルを使用して画像ファイルを添付したいなと思っていた時があります。
SVG ファイルとは Scalable Vector Graphics と呼ばれる画像フォーマットの一種で、XML に準拠しているためにテキストエディタで画像を編集することができるものになります。
ベクタ形式の画像のため、画像や文字などの 2 次元情報を数値化して記録しており、ブラウザがその場で描画してくれることもあり、解像度を気にすることもなく拡大縮小でデータが劣化することもありません。
このように、使い勝手が良い SVG ファイルを積極的に利用したい場合が往々にしてあると思いますが、実際に SVG ファイルを使用している方は多くないのではないのではないでしょうか？
そんな、SVG ファイルを使用したいけどあまり使ってこなかった方々のために、SVG ファイルを簡単に使用できそうなモジュールを見つけましたので、今回はこちらの OSS をご紹介したいと思います。
今回ご紹介する OSS は、Web アプリで SVG ファイルアイコンを気軽に使用できるモジュール「Lucide」になります。
それでは詳細についてみてみましょう！
特徴
Lucide は Feather Icons プロジェクトでアイコンを提供しているリポジトリのフォークで、現在は誰でも SVG 形式のアイコンを投稿することができるリポジトリ・OSS になります。
そして、Feature Icons のシンプルなデザイン方針を忠実に守りながら、さらにより多くのユーザーからのアイコンセットを受け入れているため、たくさんのアイコンを OSS として提供できるようになっています！
また、Lucide においては活発なコミュニティも存在しているため、さらによりたくさんのアイコンが追加され、さらに盛り上がりを見せること間違いなしの OSS になっています。
それではその Lucide について、使い方について詳細をみてみましょう！
利用手順
Lucide は Web アプリを作成するためのプログラミング言語・フレームワークで利用できます。
それぞれ、以下の方法でインストールしてください。
Web
````bash npm install lucide
or
yarn add lucide
### React
yarn add lucide-react
or
npm install lucide-react
### React Native
yarn add lucide-react-native
or
npm install lucide-react-native
### Vue 2
yarn add lucide-vue
or
npm install lucide-vue
### Vue 3
yarn add lucide-vue-next
or
npm install lucide-vue-next
### Angular
yarn add lucide-angular
or
npm install lucide-angular
### Preact
yarn add lucide-preact
or
npm install lucide-preact
### Static (svg sprite, font, icons ..)
yarn add lucide-static
or
npm install lucide-static
### Figma Lucide Figma プラグインを利用します。 詳細は、こちらの [Figma コミュニティ](https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons)を確認してください。 [f:id:kewpie13:20221020172706p:plain] ### Laravel `blade-icons` として利用する場合
composer require mallardduck/blade-lucide-icons
### Flutter
flutter pub add lucide_icons
### Svelte
yarn add lucide-svelte
or
npm install lucide-svelte
### Solid
yarn add lucide-solid
or
npm install lucide-solid
# 使用感 それでは早速私も使用してみました！ 今回は 私が普段使用している React ベースで使用してみました。 導入に関しては `npm install lucide-react` で行い、Document に記載されているように `Camera` を使用してみました。 TypeScript ベースの React プロジェクトを `create-react-app` で作成し、以下のソースを入力すると、すぐに Lucide を使用することができました。
import React from "react";
import { Camera } from "lucide-react"; // Returns ReactComponent
// Usage
function App() {
return
export default App;
[f:id:kewpie13:20221020214711p:plain] Lucide 初心者の私でも上記のようなカメラ SVG アイコンをすぐに使用できるので、みなさんもきっとすぐに活用できるとおもいます！ ちなみに、Lucide ではそれぞれのコンポーネントに Props がありますので、必要に応じて自分の好みに合ったアイコンを作成されてみてはと思います。 [f:id:kewpie13:20221020214944p:plain] ※ 上記は `Camera` アイコンの場合 # まとめ 今回は Web アプリで SVG ファイルアイコンを気軽に使用できるモジュール「**Lucide**」をご紹介しました。 [f:id:kewpie13:20221020215329p:plain] Web 開発をされている方は何かとアイコンを使用する機会があると思います。 そんな時は、SVG ファイルを簡単に使用できる OSS あったな、などとふと思い出してもらって、こちらの OSS を利用されてみてはいかがでしょうか？ # ライセンス [ISC License](https://github.com/lucide-icons/lucide/blob/main/LICENSE) # リンク [https://lucide.dev/:embed:cite] [https://github.com/lucide-icons/lucide:embed:cite]
