SVGスプライトアイコンの作り方・使い方 - 一休.com Developers Blog
この記事は一休.com アドベントカレンダー 2018の2日目の記事です。 qiita.com 宇都宮です。宿泊事業本部でフロントエンドの開発を行っています。 今回は、最近一休.comに導入した、SVGスプライトによるアイコンの作り方・使い方について紹介します。 StorybookのSVGスプライトアイコン一覧 アイコンの一般的な使い方 アイコンは、一般的に、以下のような方式で使用されると思います。 ビットマップ画像(gif, png等) アイコンフォント(Font Awosome等) SVG このうち、ビットマップ画像によるアイコンは拡大・縮小に弱いため、様々な解像度の画面に対応する必要のある現代には不向きです。アイコンフォントはベクター画像なので拡大・縮小に強く、豊富なアイコンがライブラリとして提供されているのが魅力です。SVGもアイコンフォントと同様のベクター画像ですが、フォントには
編集可能な SVG アイコンシステム — Vue.js
最終更新日: 2018年3月20日 基本的な例SVG アイコンシステムを作成する方法は多くありますが、 Vue の機能を活かす 1 つの方法は、編集可能なインラインのアイコンをコンポーネントとして作成することです。この方法のいくつかの利点は以下の通りです: 即座に編集することが簡単です アニメーション可能です 標準のプロパティやデフォルトを使用して標準サイズを保つことができ、必要ならば変更することもできます インラインなので、 HTTP リクエストは必要ありません 動的にアクセス可能に作ることができます まず、全てのアイコン用のフォルダを作り、簡単に検索できるように標準化された方法で命名をしましょう。 components/icons/IconBox.vue components/icons/IconCalendar.vue components/icons/IconEnvelope.vu
【Vue】svg画像をそのまま出力して色を変える - Qiita
Vue.jsでsvgを扱うときにはまった出来事です。 みなさんsvg使っていますか？ svgはどんな環境でもきれいに表示できますし、色もスタイルでかえられるので便利ですよね。 そのsvgをVue.jsで出力したいときにはいくつか方法があるかと思います。 テンプレートに直接書く imgタグのsrcにsvgファイルを指定する svgファイルをそのまま出力する エンジニアがsvgを書ける場合は1.の方法をとれば良いかと思うのですが、デザイナーがsvgを書いてそのファイルをそのまま読み込まなければならないこともあるかと思います。 そのときは2.か3.の方法になるのですが、2.では基本的に色を変えることができなく、svgのメリットを享受できません。(やる方法もないわけではないらしいですが) ということで3.の「svgファイルをそのまま出力する」方法を共有します。 方針 以下の方針で進めていきます。
グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing
これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい！！という一心でやっています。 これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
vue-svg-loaderを使って画像をcomponent化させる - Qiita
