@audi/audi-icon

    3.4.0 • Public • Published

    Audi Icon

    General Usage

    All Audi Icons come in two sizes

    • small: 24px
    • large: 48px

    SVG

    Add the Audi Icon CSS

    To style the Audi Icon SVGs, add the Audi Icon CSS to your website.

    The CSS is located in the dist/css folder.

    <link href="audi-icon.min.css" rel="stylesheet">

    Using Audi Icon SVGs

    We like SVGs and we think they're the way to display icons on the web. Since Audi Icons are just basic SVGs, we suggest you display them like you would any other image (don't forget the alt attribute).

    All SVGs are located in the dist/svg/static folder.

    <img class="audiicon" src="icon-name-small.svg" alt="icon name">
     
    <!-- or large -->
    <img class="audiicon audiicon--large" src="icon-name-large.svg" alt="icon name">

    Using Audi Icon SVG Sprite

    Audi Icons also come in a SVG sprite which allows you to display all the icons in the set with a single request. It's like an icon font, without being a hack.

    Adding an icon from an SVG sprite is a little different than what you're used to, but it's still a piece of cake.

    The SVG Sprite is located in the dist/svg/sprite folder.

    <svg class="audiicon">
      <use xlink:href="sprite.svg#audiicon-icon-name-small"></use>
    </svg>
     
    <!-- or large -->
    <svg class="audiicon audiicon--large">
      <use xlink:href="sprite.svg#audiicon-icon-name-large"></use>
    </svg>
     
    <!-- or both to switch between the two sizes -->
    <style media="screen">
      @media (min-width: 1024px) {
        .audiicon {
          width: 48px;
          height: 48px;
        }
        .audiicon-small {
          visibility: hidden;
        }
        .audiicon-large {
          visibility: visible;
        }
      }
    </style> 
    <svg class="audiicon">
      <use xlink:href="sprite.svg#audiicon-icon-name-small" class="audiicon-small"></use>
      <use xlink:href="sprite.svg#audiicon-icon-name-large" class="audiicon-large"></use>
    </svg>

    Coloring icons is really easy. Because all fills and strokes use currentColor, all you need to do is set the color rule on the <svg> tag.

    .audiicon {
      color: white;
    }

    To learn more about SVG Sprites, read Chris Coyier's guide.

    PNG

    You can find our default stylesheets in dist/css and the PNGs in dist/png.

    <link href="audi-icon.min.css" rel="stylesheet">
    <img class="audiicon" src="icon-name-small.png" alt="icon name">
     
    <!-- or large -->
    <img class="audiicon audiicon--large" src="icon-name-large.png" alt="icon name">
     
    <!-- or double sized for high resolution displays -->
    <img class="audiicon" src="icon-name-small.png" srcset="icon-name-small.png 1x, icon-name-small-2x.png 2x" alt="icon name">
    <img class="audiicon audiicon--large" src="icon-name-large.png" srcset="icon-name-large.png 1x, icon-name-large-2x.png 2x" alt="icon name">

    Icon font

    You can find our default stylesheets in dist/css and the fonts in dist/font.

    <link href="audi-glyph.min.css" rel="stylesheet">
    <span class="audiglyph audiglyph-icon-name" title="icon name" aria-hidden="true"></span>
     
    <!-- or large -->
    <span class="audiglyph audiglyph-icon-name audiglyph--large" title="icon name" aria-hidden="true"></span>

    Demo page

    You can use Browsersync and the following one-liner to get a demo page with all Audi Icons in action.

    npm install -g browser-sync
    npm run demo
    

    Keywords

    none

    Install

    npm i @audi/audi-icon

    DownloadsWeekly Downloads

    12

    Version

    3.4.0

    License

    Apache-2.0

    Unpacked Size

    35.8 MB

    Total Files

    2232

    Last publish

    Collaborators

    • ajaudi
    • rbruskowski
    • kai.ziefle
    • strichpunkt
    • thomasmichelbach