CSS

【CSS】SVGアイコンコレクションFlexicon

May 6, 2017

FlexiconはSVGアイコンコレクション。

CSS

.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;
}

apps

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

Demo/Download