Kalong—Styleguide, v0.0.1-alpha.1

Icon 

<svg class="icon  icon--logo">
  <use xlink:href="../../images/sprite.svg#icon--logo"/>
</svg>
 
<svg class="icon  icon--{{ icon }}{% if modifiers %}  {{ modifiers }}{% endif %}">
  <use xlink:href="{{ sprite | path }}#icon--{{ icon }}"/>
</svg>
 
debug: true
styleguide: true
shared:
  breakpoints:
    s: 480
    m: 640
    l: 720
    xl: 960
    xxl: 1100
    xxxl: 1400
    custom: '(max-width: 30em)'
  fonts:
    default:
      family: Roboto
      fallback: sans-serif
      weight: 400
      style: normal
      fontface: true
      file: roboto-regular
site:
  lang: en
  dir: ltr
  title: 'Kalong—Styleguide, v0.0.1-alpha.1'
  description: null
  themecolor: '#000000'
  modifiers: null
globals:
  nav:
    main:
      - href: '#somepage'
        label: Somepage
modifiers: null
sprite: /images/sprite.svg
  • Content: 
    /* eslint-disable no-unused-vars */
import 'svgxuse';

export default () => {};
  • URL: /components/raw/icon/icon.js
  • Filesystem Path: src/patterns/components/icon/icon.js
  • Size: 80 Bytes
  • Content: 
    // svg icons and custom icon styles
// ======================================================================

// default icon styles - inline, same color, 1em/1em
.icon {
  position: relative;
  top: -0.0625em;
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}
  • URL: /components/raw/icon/icon.scss
  • Filesystem Path: src/patterns/components/icon/icon.scss
  • Size: 291 Bytes

There are no notes for this item.