CSS
【CSS】SVGアイコンコレクションFlexicon
May 6, 2017

FlexiconはSVGアイコンコレクション。
.icon { display:inline-block; fill: currentColor; margin-top: -0.2em; width: 1em; height: 1em; vertical-align: middle; overflow: hidden; } .icon--2x { width: 2em; height: 2em; } .icon--3x { width: 3em; height: 3em; } .icon--4x { width: 4em; height: 4em; } .icon--full { width: 100%; height: 100%; } .icon--fill { background-color: currentColor; fill:#fff; } .icon--round { border-radius: 4px; } .icon--circle { border-radius: 50%; } .icon--border { border:1px solid currentColor; }
SVG Sprite
<svg viewBox="0 0 32 32" class="icon" aria-hidden="true"><use xlink:href="#icon-apps" /></svg>
SVG
<svg viewBox="0 0 32 32" class="icon icon-apps" viewBox="0 0 32 32" aria-hidden="true"><path d="M6 11h5V6H6v5zm7.5 15h5v-5h-5v5zM6 26h5v-5H6v5zm0-7.5h5v-5H6v5zm7.5 0h5v-5h-5v5zM21 6v5h5V6h-5zm-7.5 5h5V6h-5v5zm7.5 7.5h5v-5h-5v5zm0 7.5h5v-5h-5v5z"/></svg>
base64
<img src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48cGF0aCBkPSJNNiAxMWg1VjZINnY1em03LjUgMTVoNXYtNWgtNXY1ek02IDI2aDV2LTVINnY1em0wLTcuNWg1di01SDZ2NXptNy41IDBoNXYtNWgtNXY1ek0yMSA2djVoNVY2aC01em0tNy41IDVoNVY2aC01djV6bTcuNSA3LjVoNXYtNWgtNXY1em0wIDcuNWg1di01aC01djV6Ii8+PC9zdmc+'/>
base64: CSS background-image
url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48cGF0aCBkPSJNNiAxMWg1VjZINnY1em03LjUgMTVoNXYtNWgtNXY1ek02IDI2aDV2LTVINnY1em0wLTcuNWg1di01SDZ2NXptNy41IDBoNXYtNWgtNXY1ek0yMSA2djVoNVY2aC01em0tNy41IDVoNVY2aC01djV6bTcuNSA3LjVoNXYtNWgtNXY1em0wIDcuNWg1di01aC01djV6Ii8+PC9zdmc+');
MIT