StackExchange / StackExchange/Stacks

Update "Icons > requesting-an-icon" documentation

Open
#1,014 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

docs
Dominant language
TypeScript
Stars
672
Forks
107
Avg merge
2d 12h
Merged PRs (30d)
26

Description

Our internal instructions don't match up with our documentation on Stacks. We should remedy this.

There's two steps to go about submitting a new Spot illustration (or an Icon in general) to the Stacks-Icons repo:

Reach out to a designer to create the spot/icon in svg format

Open a pull request at the [Stacks-Icons GitHub repo](https://github.com/StackExchange/Stacks-Icons) with the svg added to the appropriate folder
    /src/{Icons,Spots}/IconName.svg

edit We've added requirement checklists to the repo as PR templates (icons here, spots here). Use those as the official source of truth in regards it svg requirements.

That's it! A few things to note about the svg itself:

The svg does not need to be optimized. In fact, the more readable the better. All svgs are automatically optimized as part of the package build/delivery step

Icons/spots with "native" full-color are to be submitted with all color intact. Making the icons mono-color is [taken care of via css](https://github.com/StackExchange/Stacks/blob/develop/lib/css/base/icons.less#L10-L20), so you do not need to worry about making two different versions of the same icon/spot.

Icons need to be perfectly aligned to the pixel grid. Avoiding sub-pixels keeps the image sharp

If the spot/icon is intended to be used at different sizes, consider including a SpotSm/SpotLg/SpotXL version as well

If you intend to use the icon via css (fairly rare, done for high perf reasons), include that info in the PR, as that support needs to be added on an icon-by-icon basis

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Find the documentation page for “Icons > requesting-an-icon” and compare its instructions with the Stacks-Icons icon.md and spot.md pull request templates linked in the issue. Update the page so it reflects those templates as the official SVG requirements and preserves the relevant submission guidance.

Written by the indexing model from the issue text.

Assessment

Tech stack
github
Domain
documentation
Issue type
Documentation
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.