Giter VIP home page Giter VIP logo

spectrum-css-workflow-icons's Introduction

Spectrum-CSS Workflow Icons

Build and publish spectrum-css workflow svg icons and svg sprite sheet for Spectrum CSS.

Setup

yarn install
yarn install -g http-server

For external user

Run yarn run build will generate the ready to publish package in dist/.

Run http-server dist/ -o to see the mini-site for all the workflow icons.

For adobe user

  1. Make sure connect to corp network.
  2. Run yarn add @a4u/a4u-collection-react-spectrum-open-source-release and yarn add @a4u/a4u-collection-spectrum-css-release to update the icon set from Adobe corp artifactory.
  3. Run yarn run build-icons to rebuild the icons/ folder.
  4. Run yarn run build to generate the ready to publish package in dist/
  5. Preview the icons with http-server dist/ -o

CSS Custom Properties

We will be moving to include CSS Custom Properties as fill attributes in icons.

Example:

<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
  <path d="M9 1.889A7.111 7.111 0 1 0 16.111 9 7.111 7.111 0 0 0 9 1.889zM14.333 9a5.308 5.308 0 0 1-.986 3.09L5.91 4.653A5.333 5.333 0 0 1 14.334 9h-.001zM3.666 9a5.309 5.309 0 0 1 .986-3.09l7.437 7.438A5.333 5.333 0 0 1 3.667 9h-.001z" fill="var(--iconFill, #fff)"/>
  <path d="M9 1.889A7.111 7.111 0 1 0 9 16.11 7.111 7.111 0 0 0 9 1.89m4.347 10.201L5.91 4.653a5.333 5.333 0 0 1 7.437 7.437M9 14.334A5.333 5.333 0 0 1 4.653 5.91l7.437 7.438a5.33 5.33 0 0 1-3.09.986M9 .89c4.472 0 8.111 3.639 8.111 8.111S13.472 17.111 9 17.111.889 13.472.889 9 4.528.889 9 .889zm4.095 9.535c.158-.453.24-.932.238-1.422 0-1.63-.899-3.106-2.346-3.853a4.351 4.351 0 0 0-3.41-.243l5.518 5.518zm-2.672 2.67L4.905 7.577a4.298 4.298 0 0 0-.238 1.422c0 1.63.898 3.106 2.346 3.853a4.351 4.351 0 0 0 3.41.244z" fill="var(--iconBorder, #010101)" opacity=".51"/>
</svg>

Although not all icons are currently using this properties, we'll be migrating more to use them. Here is the list of planned properties names:

  • iconCutout
  • iconBackground
  • iconFillStrong
  • iconFill
  • iconFillMedium
  • iconFillPale
  • iconFillLight
  • iconBlue
  • iconGreen
  • iconRed
  • iconOrange
  • iconPurple
  • iconIndigo
  • iconCelery
  • iconMagenta
  • iconYellow
  • iconFuchsia
  • iconSeafoam
  • iconChartreuse

Contributing

Contributions are welcomed! Read the Contributing Guide for more information.

Licensing

This project is licensed under the Apache V2 License. See LICENSE for more information.

spectrum-css-workflow-icons's People

Contributors

jianliao avatar dependabot[bot] avatar hinschmi avatar garthdb avatar majornista avatar snowystinger avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.