ディレクトリの名前はなんでも大丈夫です。注意点SVGのオブジェクトにfill属性などが指定されているとCSSでの色の変更ができなくなりますので削除しておきましょう。SVG内でStyleをclassで指定されている場合がありますが、IllustratorやPhotoshopで書き出すとclass名が被ってしまいスタイルがおかしくなることがあります。削除するかclassを使わない形に書き直しておきましょう。Svgeezを実行RailsプロジェクトのROOTで以下のコマンドを実行します。作成されたSVGスプライトです。こちらをHamlに読み込みます。最後に以下のコードを記述します。格納されていたSVG画像のひとつひとつはSymbol要素としてicons.svgに書き込まれています。find_assetは使えませんでした(config.assets.compileはproduction環境ではfalseにしている場合が多いため)。4.2以降の読み込み方法がドキュメントに追加されました。ダニーさんに感謝SVGを使うSVG内のuse要素にて目的のsymbolを呼び出します。%use(xlink:href="#icons-hoge")SVGスプライトにする前のSVGのファイル名がID名になります。付け忘れて表示されない...ということがわりとあるので気をつけましょう。Helperを作ってもいいですね。弊社で絶賛開発中のDocBaseでもSVGスプライトを使用しています。2つのデザインテーマが選べるようになっていますが、テーマによってアイコンの配色が違うのでSVGを使用しCSSで色を変更しています。LightテーマDarkテーマ使用しているのはサイドメニューのアイコンです。アイコン部分のソースは以下のようになっています。%use.nav-list__item-icon-front(xlink:href="#icon-group__front")use要素が2つありますが、こちらはCSSで操作するためSVG側で色を変えたい要素をg要素で囲み、そのg要素ごとに呼び出しています。こんなかんじで分かれています。そちらをテーマごとにスタイルを変えています。使うときのサイズが作成したSVGのサイズと違うと表示領域がおかしくなるので、その場合は呼び出し先のSVG要素にViewBox属性をつけてください。これ、PNGでやろうと思ったらRetinaディスプレイ対応含めたら4つ画像作らないといけないですからね。色の変更も一瞬でできます宣伝DocBaseとは情報共有を活発にし、チームを育てるをコンセプトにした情報共有サービスです。柔軟な権限設定と使いやすさ、社内の人も社外の人も全員を招待できるから、￼￼￼さまざまな人やツールに散らばっていた情報を一元化できます。積極的な情報共有と業務の効率化を実現し、チームの成長を促します。LambdaでTwitterを検索!Slackに通知してエゴ...「いいね!」で応援よろしくお願いします!このエントリーに対するコメントコメントはまだありません。date*日本語が含まれない投稿は無視されますのでご注意ください。fax.0422-26-9781お問い合わせはこちらからどうぞ。