Non-Partisan Magicians

    postcss-icon.stiffi

    1.0.1 • Public • Published

    postcss-icon.stiffi

    Icon set data for postcss-icon plugin, based on css icons, a pen by sti#i

    postcss-icon.stiffi

    Install

    npm install -D postcss-icon.stiffi postcss-icon
    # or 
    yarn add -D postcss-icon.stiffi postcss-icon

    Input

    .custom-selector {
      @icon: stiffi-comment; /* 'stiffi-' is Prefix , 'comment' is name Icon*/
      color: gold;
      /* ... your css code */
    }

    Output

    .custom-selector::after{
      content: '';
      /* ... */
    }
    /* after before i span if needed */
    .custom-selector{
      color: #000;
      width: 20px;
      heigth: 20px;
      /* ... */
      color: gold;
      /* ... your css code */
    }

    Use (more examples)

    const     postcss = require('postcss');
    const postcssIcon = require('postcss-icon');
     
    const CSS = `
    .custom-selector {
      @icon: stiffi-comment;
    }`;
     
    postcss(
      postcssIcon({
        "postcss-icon.stiffi": {
          prefix: 'stiffi-' /* required when using multiple Icon data sets */
        },
        "postcss-icon.OtherSetName": { /* Options */ }
      })
    ).process(CSS).then(({css, messages}) => {
      console.log(css);
      messages
        .filter(i => i.type === "warning")
        .map(e => console.log(e.toString()));
    });

    Other icon sets:

    Font icons:

    Css only icons:

    All name icons (count: 34) result demo

    backward, bookmark, comment, down, eject, file, filter, flag, folder, forbidden, forward, gear, heart, left, link, list, location, lock, pause, photo, play, profile, right, search, share, sound, step-backward, step-forward, stop, tag, unlock, up, video, wrench

    Keywords

    none

    Install

    npm i postcss-icon.stiffi

    DownloadsWeekly Downloads

    1

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • retyui