🤔 こんな悩みありませんか？
Webアプリやモバイルアプリ開発で、プロジェクトにSVGファイルを追加することがよくありますよね。
しかし、Cursor上ではSVGファイルが文字列で表示されるため、ぱっと見でどんなアイコンやイラストなのかわからない...という経験はありませんか？
SVGファイルを開いても、このように文字列でしか表示されない
毎回ブラウザで開いて確認するのは面倒ですし、開発効率も下がってしまいます。
そこで今回は、Cursor上で直接SVGファイルの見た目を確認できる方法をご紹介します！
🔧 解決方法：SVG拡張機能を使う
STEP1: 拡張機能をインストール
- Cursorの拡張機能検索で「SVG」と検索
- jock氏が開発者のSVG拡張機能をインストール
「SVG」で検索すると、jock氏の拡張機能が見つかります
STEP2: SVGファイルをプレビュー
- 表示したいSVGファイルを右クリック
- 「Preview SVG」を選択
右クリックメニューから「Preview SVG」を選択
STEP3: 完了！
SVGファイルの内容（文字列）と一緒に、実際の見た目も表示されます！
文字列と一緒にSVGの見た目も確認できる
✨ この方法のメリット
🚀 開発効率アップ
- ブラウザで開く手間が不要
- Cursor内で完結するためワークフローが途切れない
👀 視認性向上
- アイコンの種類や色をすぐに判別可能
- 複数のSVGファイルを比較検討しやすい
🔄 リアルタイム確認
- SVGを編集した後、即座に変更を確認可能
- デザインの微調整がスムーズに
🎯 こんな場面で役立つ
- アイコン選択時: 複数のアイコンから適切なものを選ぶ
- SVG編集時: パスの調整や色の変更を確認
- デザインレビュー: チームメンバーとの確認作業
- コンポーネント開発: UIライブラリの整理・管理
💡 さらに活用するコツ
ファイルの整理がしやすくなる
プロジェクトに大量のSVGアイコンがある場合、この拡張機能があることでファイル名だけでなく見た目でも判断できるようになります。「あのアイコンどこだっけ？」という時間が大幅に短縮されるでしょう。
デザインシステムの構築に最適
UIライブラリやデザインシステムを構築している方にとって、アイコンの一覧性と管理性が向上します。類似したアイコンの重複チェックや、統一感のあるアイコン選択が格段に楽になります。
チーム開発での効果
デザイナーとエンジニアの連携もスムーズになります。「このアイコンを使って」という指示があった時に、即座に視覚的に確認できるため、コミュニケーションエラーを防げます。
まとめ
たった一つの拡張機能をインストールするだけで、Cursor上でのSVGファイル管理が劇的に改善されます。
特にフロントエンド開発やUIデザインに携わる方には、必須レベルで便利な機能だと思います。
まだ使っていない方は、ぜひ試してみてください！開発体験が向上すること間違いなしです。
Discussion