stackexchange/stacks-icons

Authoring tools for Stack Overflow's shared icon set.

stacks-icons's Issues

New Icon: Tiny up and down arrows

It'd be nice to have the 16x16 up and down arrows in the image below available in Stacks and in the Core/svg.helper

Include phone and laptop

In our documentation site, we include phone and laptops directly in the markup. We should consider adding these to our icon set.

Deliver as a nuget package

Our icons should be delivered as a nuget package for other solutions to consume. We should include all the icons and spots, while generating a helper.cs file that provides definitions.

Add an icon for Discord

Similar to the Slack and MSTeams icons already in Stacks, please add an icon for Discord. Icons can be found at https://discord.com/branding

Export PNG versions of the icon set

• Find the canonical color for icons and render them
• Allow them to be downloadable in our docs

New icon: Jira

Can we get an icon for Jira? They're available on Atlassian's design system, though I'm not sure which one we want:

Define a richer aesthetic

Given the following technical constraints:

1. Icons can have native coloring like that bulb at the lower right. That's the native colors we can show if the engineer decides they want to.
2. Icons can be re-colored using 1 color as shown in a stock grayscale version.
3. Icons can be re-colored on the fly using a pop / selected color. This can be a Team's themed color, or perhaps a selected state.

We're going to find a richer aesthetic that works at:

1. 18px / 16px
2. Offers decent legibility
3. Allows for rich colors that can be re-colored
4. Feels like Stack Overflow

For example, these are rendered too large to satisfy legibility at 18px / 16px, but satisfy technical constraints:

Update Enterprise logo. Add Teams, Talent, Engagement

Update the Enterprise logo icons with "For Enterprise" version. Add "For Teams" logo, as well as SO Talent and Engagement logos.

Add a preview of the final icon output

We should also build a simple html index of the final output for smoke and visual regression testing. I've been trolled too many times by fill rules filling in icons entirely.

Spot Illustrations

Let's include spot illustrations in our icon set.

TODO:

• Create spot illustrations from 32px, 64px, 128px, and 256px
• Create build script to ingest Illustrator SVG
• Talk to production folks about how we deliver these via helper since the file size will be much larger
• Find a way to include aliases for shapes. A single icon should be able to have any number of names.

@Svg.Tada isn't fully greyscale

When @Svg.Tada is rendered without the native class, there's a little orange (and maybe blue?) shooting out of it.

New Icon: TrendingNone

We have @Svg.TrendingDown and @Svg.TrendingUp, but what if a metric isn't trending in a meaningful way and it's the same compared to the last time point? It would be nice to have an icon representing no change in trend.

This a common icon used in the sports world to show when teams are moving up, down, or staying in the same place in a league's standings / table. I'm open to suggestion here, though.

More editor-related icons

Hi, I want to based my editor on Stacks-Editor but the number of icons is kinda limited. Is there anyone who can create "missing" icons (like for example H1 to H6 icons, alignment icons and many more) or I would have to do them by myself?

Guide for usage in Markdown

I would like to use the StackOverflow icon within my Markdown as an image link like so:

[![alt text](logo) Link to SO tag](https://stackoverflow.com/questions/tagged/my-tag)

Is it possible to consume these icons in this way?

I was surprised not to see them available on https://icongr.am/

TrashSm

For when you're trash, but also smol.

Needed to accompany PencilSm.

Support a wider range of emotions

In surveys, we should be able to include a wider range of emotions. Beyond Happy, Sad and Neutral.

Figma integration

Our icons should be available to us in Figma now that we have a team license.

1. Each icon should be a component in a shared library
2. Our final icon code should be generated by a shared Figma document

Conflicting gradient IDs are causing strange coloring

When Instagram and Jira, two icons that each have gradient fills, are used on the same page, their gradient IDs compete, causing unpredictable coloring.

New icon: download

On Stack for Business, we have a billing page that has action items to download the invoice and receipt. I think this might be an opportunity for us to add a download icon to go alongside download links (or replace if we're very tight on space).

I found these two icons on Google Material design and Flaticon but thinking we might want to simplify it to a down arrow with the line underneath?

Add an icon for columns

As reported by @UXPiper, we could use an icon for column sorting / editing.

Natively-sized voting Q&A actions icons

If we're to replace the Q&A questions actions with SVG replacements, we'll need natively-sized icons.

Add diff icons

We could use some icons to represent rendered markdown, markdown source, and diffs.

Generated ESM module is missing the Icons and Spots namespaces

The generated index.esm.js file lacks namespaces and conflicts with the typescript definitions.

The distributed module contents only define the names found inside the icons and spots modules, which then are all exported as is. Because of this, you can't actually use import { IconFaceMindBlown } from "@stackoverflow/stacks-icons/icons"; as the documentation claims.

Instead, you get an error:

index.ts:1:35 - error TS2307: Cannot find module '@stackoverflow/stacks-icons/icons' or its corresponding type declarations.

1 import { IconFaceMindBlown } from "@stackoverflow/stacks-icons/icons";
                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

You can't simply use import { IconFaceMindBlown } from "@stackoverflow/stacks-icons"; as the type information tells typescript that at that level only Icons and Spots are available.

To reproduce, in an empty directory create the following three files:

package.json

{
  "name": "mcve",
  "dependencies": { "@stackoverflow/stacks-icons": "^5.3.1" },
  "devDependencies": { "typescript": "^4.9.5" },
  "scripts": { "build": "npx tsc" }
}

tsconfig.json

{
  "compilerOptions": {
    "moduleResolution": "node",
    "target": "ES2020"
  },
  "files": ["index.ts"]
}

index.ts

import { IconFaceMindBlown } from "@stackoverflow/stacks-icons/icons";
export { IconFaceMindBlown }

then run

npm install && npm build

Deliver icons as backgrounds for high-traffic situations

Went for a long drive today and may have accidentally come up with a solution allowing for the same flexibility in our icon set that SVG allows, only for PNG.

Proposal

1. Either export from Figma, or build PNGs from our optimized SVG set @2x and #000.
2. In a .css file, export something like .png-icon.iconLink with background-image: url(../path/to/Link.png)
3. Build atomic coloring classes for .png-icon that's based on CSS filters using this tool. eg. .png-icon.iconLink.fc-orange-400. These classes will also have their dark mode equivalents.
4. Provide a PNG helper in the same way we do SVG. eg. @Png.Link.With("fc-orange-400")
5. Profit.

Any thoughts before I hack together a proof of concept?

Things to solve / discover:

1. General path issues. How do we keep this self-contained as a straight dependency, and integrate into Stack Overflow
2. Inheritance. If we have <div class="fc-orange-400"><div class="png-icon"></div></div>, we'll probably want that icon to be orange.
3. Will just delivering the retina version of these be enough, or will scaling a 2x image on 1x screens be good enough?
4. ???

SVG Files are missing XMLNS, thus failing to load

The <svg> tag in most icons (e.g., LogoEnterprise.svg) is missing the xmlns="http://www.w3.org/2000/svg" attribute. This causes them not to load as images in Chrome, Firefox or Internet Explorer. GitHub also shows an invalid file error: https://github.com/StackExchange/Stacks-Icons/blob/master/build/lib/LogoEnterprise.svg

This is already the case in the build/lib folder, so it's not a problem of the Gruntfile/Build process.

Correction: This IS a problem with the build process, the original icons are in src/export and are good: https://github.com/StackExchange/Stacks-Icons/blob/master/src/export/LogoEnterprise.svg