Sunsetting Shields custom logos (#10347)
* Sunsetting Shields custom logos * Reinstate info to contribute to SimpleIcons * Mention that no changes are required
@ -77,6 +77,15 @@ don't see it, feel free to [open a new issue][open an issue].
|
||||
|
||||
[open an issue]: https://github.com/badges/shields/issues/new/choose
|
||||
|
||||
### Requesting new logos
|
||||
|
||||
We consume logos via [the SimpleIcons project][simple-icons github], and
|
||||
encourage you to contribute logos there. Please review their
|
||||
[guidance][simple-icons contributing] before doing so.
|
||||
|
||||
[simple-icons github]: https://github.com/simple-icons/simple-icons
|
||||
[simple-icons contributing]: https://github.com/simple-icons/simple-icons/blob/develop/CONTRIBUTING.md
|
||||
|
||||
### Spreading the word
|
||||
|
||||
Feel free to star the repository. This will help increase the visibility of the project, therefore attracting more users and contributors to Shields!
|
||||
@ -154,10 +163,6 @@ To run the integration tests:
|
||||
|
||||
There is a [High-level code walkthrough](doc/code-walkthrough.md) describing the layout of the project.
|
||||
|
||||
### Logos
|
||||
|
||||
We have [documentation for logo usage](doc/logos.md) which includes [contribution guidance](doc/logos.md#contributing-logos)
|
||||
|
||||
## Pull Requests
|
||||
|
||||
All code changes are incorporated via pull requests, and pull requests are always squashed into a single commit on merging. Therefore there's no requirement to squash commits within your PR, but feel free to squash or restructure the commits on your PR branch if you think it will be helpful. PRs with well structured commits are always easier to review!
|
||||
|
@ -223,9 +223,6 @@ Alumni:
|
||||
All assets and code are under the [CC0 LICENSE](LICENSE) and in the public
|
||||
domain unless specified otherwise.
|
||||
|
||||
The assets in `logo/` are trademarks of their respective companies and are
|
||||
under their terms and license.
|
||||
|
||||
## Community
|
||||
|
||||
Thanks to the people and companies who donate money, services or time to keep the project running. [https://shields.io/community](https://shields.io/community)
|
||||
|
@ -17,12 +17,10 @@ import toArray from './to-array.js'
|
||||
//
|
||||
// Logos are resolved in this manner:
|
||||
//
|
||||
// 1. When `?logo=` contains a named logo or the name of one of the Shields
|
||||
// logos or contains base64-encoded SVG, that logo is used. When a
|
||||
// `&logoColor=` is specified, that color is used (except for the
|
||||
// base64-encoded logos). Otherwise the default color is used. If the color
|
||||
// is specified for a multicolor Shield logo, the named logo will be used and
|
||||
// colored. The appearance of the logo can be customized using `logoWidth`,
|
||||
// 1. When `?logo=` contains a simple-icons logo or contains a base64-encoded
|
||||
// SVG, that logo is used. When a `&logoColor=` is specified, that color is
|
||||
// used (except for the base64-encoded logos). Otherwise the default color
|
||||
// is used. The appearance of the logo can be customized using `logoWidth`,
|
||||
// When `?logo=` is specified, any logo-related parameters specified
|
||||
// dynamically by the service, or by default in the service, are ignored.
|
||||
// 2. The second precedence is the dynamic logo returned by a service. This is
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { expect } from 'chai'
|
||||
import { getShieldsIcon, getSimpleIcon } from '../../lib/logos.js'
|
||||
import { getSimpleIcon } from '../../lib/logos.js'
|
||||
import coalesceBadge from './coalesce-badge.js'
|
||||
|
||||
describe('coalesceBadge', function () {
|
||||
@ -138,7 +138,7 @@ describe('coalesceBadge', function () {
|
||||
})
|
||||
|
||||
it('when a social badge, uses the default named logo', function () {
|
||||
// .not.be.empty for confidence that nothing has changed with `getShieldsIcon()`.
|
||||
// .not.be.empty for confidence that nothing has changed with `getSimpleIcon()`.
|
||||
expect(
|
||||
coalesceBadge({ style: 'social' }, {}, { namedLogo: 'appveyor' }).logo,
|
||||
).to.equal(getSimpleIcon({ name: 'appveyor' })).and.not.be.empty
|
||||
@ -149,52 +149,35 @@ describe('coalesceBadge', function () {
|
||||
namedLogo: 'npm',
|
||||
})
|
||||
expect(coalesceBadge({}, { namedLogo: 'npm' }, {}).logo).to.equal(
|
||||
getShieldsIcon({ name: 'npm' }),
|
||||
getSimpleIcon({ name: 'npm' }),
|
||||
).and.not.to.be.empty
|
||||
})
|
||||
|
||||
it('applies the named monochrome logo with color', function () {
|
||||
it('applies the named logo with color', function () {
|
||||
expect(
|
||||
coalesceBadge({}, { namedLogo: 'dependabot', logoColor: 'blue' }, {})
|
||||
.logo,
|
||||
).to.equal(getShieldsIcon({ name: 'dependabot', color: 'blue' })).and.not
|
||||
).to.equal(getSimpleIcon({ name: 'dependabot', color: 'blue' })).and.not
|
||||
.to.be.empty
|
||||
})
|
||||
|
||||
it('applies the named multicolored logo with color', function () {
|
||||
expect(
|
||||
coalesceBadge({}, { namedLogo: 'npm', logoColor: 'blue' }, {}).logo,
|
||||
).to.equal(getSimpleIcon({ name: 'npm', color: 'blue' })).and.not.to.be
|
||||
.empty
|
||||
})
|
||||
|
||||
it('overrides the logo', function () {
|
||||
expect(
|
||||
coalesceBadge({ logo: 'npm' }, { namedLogo: 'appveyor' }, {}).logo,
|
||||
).to.equal(getShieldsIcon({ name: 'npm' })).and.not.be.empty
|
||||
).to.equal(getSimpleIcon({ name: 'npm' })).and.not.be.empty
|
||||
})
|
||||
|
||||
it('overrides the monochrome logo with a color', function () {
|
||||
it('overrides the logo with a color', function () {
|
||||
expect(
|
||||
coalesceBadge(
|
||||
{ logo: 'dependabot', logoColor: 'blue' },
|
||||
{ namedLogo: 'appveyor' },
|
||||
{},
|
||||
).logo,
|
||||
).to.equal(getShieldsIcon({ name: 'dependabot', color: 'blue' })).and.not
|
||||
).to.equal(getSimpleIcon({ name: 'dependabot', color: 'blue' })).and.not
|
||||
.be.empty
|
||||
})
|
||||
|
||||
it('overrides multicolored logo with a color', function () {
|
||||
expect(
|
||||
coalesceBadge(
|
||||
{ logo: 'npm', logoColor: 'blue' },
|
||||
{ namedLogo: 'appveyor' },
|
||||
{},
|
||||
).logo,
|
||||
).to.equal(getSimpleIcon({ name: 'npm', color: 'blue' })).and.not.be.empty
|
||||
})
|
||||
|
||||
it("when the logo is overridden, it ignores the service's logo color and width", function () {
|
||||
expect(
|
||||
coalesceBadge(
|
||||
@ -206,35 +189,25 @@ describe('coalesceBadge', function () {
|
||||
},
|
||||
{},
|
||||
).logo,
|
||||
).to.equal(getShieldsIcon({ name: 'npm' })).and.not.be.empty
|
||||
).to.equal(getSimpleIcon({ name: 'npm' })).and.not.be.empty
|
||||
})
|
||||
|
||||
it("overrides the service monochome logo's color", function () {
|
||||
it("overrides the service logo's color", function () {
|
||||
expect(
|
||||
coalesceBadge(
|
||||
{ logoColor: 'blue' },
|
||||
{ namedLogo: 'dependabot', logoColor: 'red' },
|
||||
{},
|
||||
).logo,
|
||||
).to.equal(getShieldsIcon({ name: 'dependabot', color: 'blue' })).and.not
|
||||
).to.equal(getSimpleIcon({ name: 'dependabot', color: 'blue' })).and.not
|
||||
.be.empty
|
||||
})
|
||||
|
||||
it("overrides the service multicolored logo's color", function () {
|
||||
expect(
|
||||
coalesceBadge(
|
||||
{ logoColor: 'blue' },
|
||||
{ namedLogo: 'npm', logoColor: 'red' },
|
||||
{},
|
||||
).logo,
|
||||
).to.equal(getSimpleIcon({ name: 'npm', color: 'blue' })).and.not.be.empty
|
||||
})
|
||||
|
||||
// https://github.com/badges/shields/issues/2998
|
||||
it('overrides logoSvg', function () {
|
||||
const logoSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxu'
|
||||
expect(coalesceBadge({ logo: 'npm' }, { logoSvg }, {}).logo).to.equal(
|
||||
getShieldsIcon({ name: 'npm' }),
|
||||
getSimpleIcon({ name: 'npm' }),
|
||||
).and.not.be.empty
|
||||
})
|
||||
})
|
||||
|
@ -124,7 +124,7 @@ function category2openapi({ category, services, sort = false }) {
|
||||
in: 'query',
|
||||
required: false,
|
||||
description:
|
||||
'One of the named logos (bitcoin, dependabot, gitlab, npm, paypal, serverfault, stackexchange, superuser, telegram, travis) or simple-icons. All simple-icons are referenced using icon slugs. You can click the icon title on <a href="https://simpleicons.org/" rel="noopener noreferrer" target="_blank">simple-icons</a> to copy the slug or they can be found in the <a href="https://github.com/simple-icons/simple-icons/blob/master/slugs.md">slugs.md file</a> in the simple-icons repository. <a href="/docs/logos">Further info</a>.',
|
||||
'Icon slug from simple-icons. You can click the icon title on <a href="https://simpleicons.org/" rel="noopener noreferrer" target="_blank">simple-icons</a> to copy the slug or they can be found in the <a href="https://github.com/simple-icons/simple-icons/blob/master/slugs.md">slugs.md file</a> in the simple-icons repository. <a href="/docs/logos">Further info</a>.',
|
||||
schema: {
|
||||
type: 'string',
|
||||
},
|
||||
@ -135,7 +135,7 @@ function category2openapi({ category, services, sort = false }) {
|
||||
in: 'query',
|
||||
required: false,
|
||||
description:
|
||||
'The color of the logo (hex, rgb, rgba, hsl, hsla and css named colors supported). Supported for named logos and Shields logos but not for custom logos. For multicolor Shields logos, the corresponding named logo will be used and colored.',
|
||||
'The color of the logo (hex, rgb, rgba, hsl, hsla and css named colors supported). Supported for simple-icons logos but not for custom logos.',
|
||||
schema: {
|
||||
type: 'string',
|
||||
},
|
||||
@ -146,7 +146,7 @@ function category2openapi({ category, services, sort = false }) {
|
||||
in: 'query',
|
||||
required: false,
|
||||
description:
|
||||
'Make icons adaptively resize by setting `auto`. Useful for some wider logos like `amd` and `amg`. Supported for simple-icons logos only.',
|
||||
'Make icons adaptively resize by setting `auto`. Useful for some wider logos like `amd` and `amg`. Supported for simple-icons logos but not for custom logos.',
|
||||
schema: {
|
||||
type: 'string',
|
||||
},
|
||||
|
@ -80,7 +80,7 @@ const expected = {
|
||||
in: 'query',
|
||||
required: false,
|
||||
description:
|
||||
'One of the named logos (bitcoin, dependabot, gitlab, npm, paypal, serverfault, stackexchange, superuser, telegram, travis) or simple-icons. All simple-icons are referenced using icon slugs. You can click the icon title on <a href="https://simpleicons.org/" rel="noopener noreferrer" target="_blank">simple-icons</a> to copy the slug or they can be found in the <a href="https://github.com/simple-icons/simple-icons/blob/master/slugs.md">slugs.md file</a> in the simple-icons repository. <a href="/docs/logos">Further info</a>.',
|
||||
'Icon slug from simple-icons. You can click the icon title on <a href="https://simpleicons.org/" rel="noopener noreferrer" target="_blank">simple-icons</a> to copy the slug or they can be found in the <a href="https://github.com/simple-icons/simple-icons/blob/master/slugs.md">slugs.md file</a> in the simple-icons repository. <a href="/docs/logos">Further info</a>.',
|
||||
schema: { type: 'string' },
|
||||
example: 'appveyor',
|
||||
},
|
||||
@ -89,7 +89,7 @@ const expected = {
|
||||
in: 'query',
|
||||
required: false,
|
||||
description:
|
||||
'The color of the logo (hex, rgb, rgba, hsl, hsla and css named colors supported). Supported for named logos and Shields logos but not for custom logos. For multicolor Shields logos, the corresponding named logo will be used and colored.',
|
||||
'The color of the logo (hex, rgb, rgba, hsl, hsla and css named colors supported). Supported for simple-icons logos but not for custom logos.',
|
||||
schema: { type: 'string' },
|
||||
example: 'violet',
|
||||
},
|
||||
@ -98,7 +98,7 @@ const expected = {
|
||||
in: 'query',
|
||||
required: false,
|
||||
description:
|
||||
'Make icons adaptively resize by setting `auto`. Useful for some wider logos like `amd` and `amg`. Supported for simple-icons logos only.',
|
||||
'Make icons adaptively resize by setting `auto`. Useful for some wider logos like `amd` and `amg`. Supported for simple-icons logos but not for custom logos.',
|
||||
schema: {
|
||||
type: 'string',
|
||||
},
|
||||
|
@ -22,7 +22,6 @@ const server = fileMatch('core/server/**.js', '!*.spec.js')
|
||||
const serverTests = fileMatch('core/server/**.spec.js')
|
||||
const legacyHelpers = fileMatch('lib/**/*.js', '!*.spec.js')
|
||||
const legacyHelperTests = fileMatch('lib/**/*.spec.js')
|
||||
const logos = fileMatch('logo/*.svg')
|
||||
const packageJson = fileMatch('package.json')
|
||||
const packageLock = fileMatch('package-lock.json')
|
||||
const secretsDocs = fileMatch('doc/server-secrets.md')
|
||||
@ -78,17 +77,6 @@ if (legacyHelpers.created) {
|
||||
)
|
||||
}
|
||||
|
||||
if (logos.created) {
|
||||
message(
|
||||
[
|
||||
':art: Thanks for submitting a logo. <br>',
|
||||
'Please ensure your contribution follows our ',
|
||||
'[guidance](https://github.com/badges/shields/blob/master/doc/logos.md#contributing-logos) ',
|
||||
'for logo submissions.',
|
||||
].join(''),
|
||||
)
|
||||
}
|
||||
|
||||
if (capitals.created || underscores.created) {
|
||||
fail(
|
||||
[
|
||||
|
42
doc/logos.md
@ -1,42 +0,0 @@
|
||||
# Logos
|
||||
|
||||
For documentation on using logos, see https://shields.io/docs/logos
|
||||
|
||||
## Contributing Logos
|
||||
|
||||
Our preferred way to consume icons is via the SimpleIcons logo. As a first port of call, we encourage you to contribute logos to [the SimpleIcons project][simple-icons github]. Please review their [guidance](https://github.com/simple-icons/simple-icons/blob/develop/CONTRIBUTING.md) before contributing.
|
||||
|
||||
In some cases we may also accept logo submissions directly. In general, we do this only when:
|
||||
|
||||
- We have a corresponding badge on the homepage, (e.g. the Eclipse logo because we support service badges for the Eclipse Marketplace). We may also approve logos for other tools widely used by developers.
|
||||
- The logo provided in SimpleIcons is unclear when displayed at small size on a badge.
|
||||
- There is substantial benefit in using a multi-colored icon over a monochrome icon.
|
||||
- The logo doesn't meet the requirements to be included in the SimpleIcons set.
|
||||
|
||||
If you are submitting a pull request for a custom logo, please:
|
||||
|
||||
- Minimize SVG files through [SVGO][]. This can be done in one of two ways
|
||||
- The [SVGO Command Line Tool][svgo]
|
||||
- Install SVGO
|
||||
- With npm: `npm install -g svgo`
|
||||
- With Homebrew: `brew install svgo`
|
||||
- Run the following command `svgo --precision=3 icon.svg -o icon.min.svg`
|
||||
- Check if there is a loss of quality in the output, if so increase the precision.
|
||||
- The [SVGOMG Online Tool][svgomg]
|
||||
- Click "Open SVG" and select an SVG file.
|
||||
- Set the precision to about 3, depending on if there is a loss of quality.
|
||||
- Leave the remaining settings untouched (or reset them with the button at the bottom of the settings).
|
||||
- Click the download button.
|
||||
- Set a viewbox and ensure the logo is scaled to fit the viewbox, while preserving the logo's original proportions. This means the icon should be touching at least two sides of the viewbox.
|
||||
- Ensure the logo is vertically and horizontally centered.
|
||||
- Ensure the logo is minified to a single line with no formatting.
|
||||
- Ensure the SVG does not contain extraneous attributes.
|
||||
- Ensure your submission conforms to any relevant brand or logo guidelines.
|
||||
|
||||
### Problems
|
||||
|
||||
We try to ensure our logos are compliant with brand guidelines. If one of our custom logos does not conform to the necessary brand guidelines, please open an issue on the [shields.io tracker](https://github.com/badges/shields/issues) and we'll work with you to resolve it. If a logo from the simple-icons set does not conform to the relevant brand guidelines, please open an issue on the [simple-icons tracker](https://github.com/simple-icons/simple-icons/issues) first.
|
||||
|
||||
[simple-icons github]: https://github.com/simple-icons/simple-icons
|
||||
[svgo]: https://github.com/svg/svgo
|
||||
[svgomg]: https://jakearchibald.github.io/svgomg/
|
39
frontend/blog/2024-07-10-sunsetting-shields-custom-logos.md
Normal file
@ -12,12 +12,6 @@ We support a wide range of logos via [SimpleIcons](https://simpleicons.org/). Al
|
||||
|
||||
You can click the icon title on <a href="https://simpleicons.org/" rel="noopener noreferrer" target="_blank">simple-icons</a> to copy the slug or they can be found in the <a href="https://github.com/simple-icons/simple-icons/blob/master/slugs.md">slugs.md file</a> in the simple-icons repository. NB - the Simple Icons site and slugs.md page may at times contain new icons that haven't yet been pulled into Shields.io yet. More information on how and when we incorporate icon updates can be found [here](https://github.com/badges/shields/discussions/5369).
|
||||
|
||||
## Shields logos
|
||||
|
||||
We also maintain a small number of custom logos for a handful of services: https://github.com/badges/shields/tree/master/logo They can also be referenced by name and take preference to SimpleIcons e.g:
|
||||
|
||||
 - https://img.shields.io/npm/v/npm.svg?logo=npm
|
||||
|
||||
## Custom Logos
|
||||
|
||||
Any custom logo can be passed in a URL parameter by base64 encoding it. e.g:
|
||||
@ -26,12 +20,7 @@ Any custom logo can be passed in a URL parameter by base64 encoding it. e.g:
|
||||
|
||||
## logoColor parameter
|
||||
|
||||
The `logoColor` param can be used to set the color of the logo. Hex, rgb, rgba, hsl, hsla and css named colors can all be used. For SimpleIcons named logos (which are monochrome), the color will be applied to the SimpleIcons logo.
|
||||
The `logoColor` param can be used to set the color of the SimpleIcons named logo. Hex, rgb, rgba, hsl, hsla and css named colors can all be used.
|
||||
|
||||
-  - https://img.shields.io/badge/logo-javascript-blue?logo=javascript
|
||||
-  - https://img.shields.io/badge/logo-javascript-blue?logo=javascript&logoColor=f5f5f5
|
||||
|
||||
In the case where Shields hosts a custom multi-colored logo, if the `logoColor` param is passed, the corresponding SimpleIcons logo will be substituted and colored.
|
||||
|
||||
-  - https://img.shields.io/badge/logo-gitlab-blue?logo=gitlab
|
||||
-  - https://img.shields.io/badge/logo-gitlab-blue?logo=gitlab&logoColor=white
|
||||
|
@ -1,36 +0,0 @@
|
||||
import fs from 'fs'
|
||||
import path from 'path'
|
||||
import { fileURLToPath } from 'url'
|
||||
import { svg2base64 } from './svg-helpers.js'
|
||||
|
||||
function loadLogos() {
|
||||
// Cache svg logos from disk in base64 string
|
||||
const logos = {}
|
||||
const logoDir = path.join(
|
||||
path.dirname(fileURLToPath(import.meta.url)),
|
||||
'..',
|
||||
'logo',
|
||||
)
|
||||
const logoFiles = fs.readdirSync(logoDir)
|
||||
logoFiles.forEach(filename => {
|
||||
if (filename[0] === '.') {
|
||||
return
|
||||
}
|
||||
// filename is eg, github.svg
|
||||
const svg = fs.readFileSync(`${logoDir}/${filename}`).toString()
|
||||
const base64 = svg2base64(svg)
|
||||
// logo is monochrome if it only has one fill= statement
|
||||
const isMonochrome = (svg.match(/fill="(.+?)"/g) || []).length === 1
|
||||
|
||||
// eg, github
|
||||
const name = filename.slice(0, -'.svg'.length).toLowerCase()
|
||||
logos[name] = {
|
||||
isMonochrome,
|
||||
svg,
|
||||
base64,
|
||||
}
|
||||
})
|
||||
return logos
|
||||
}
|
||||
|
||||
export default loadLogos
|
29
lib/logos.js
@ -6,9 +6,7 @@ import {
|
||||
} from '../badge-maker/lib/color.js'
|
||||
import coalesce from '../core/base-service/coalesce.js'
|
||||
import { svg2base64, getIconSize, resetIconPosition } from './svg-helpers.js'
|
||||
import loadLogos from './load-logos.js'
|
||||
import loadSimpleIcons from './load-simple-icons.js'
|
||||
const logos = loadLogos()
|
||||
const simpleIcons = loadSimpleIcons()
|
||||
|
||||
// for backwards-compatibility with deleted logos
|
||||
@ -19,6 +17,7 @@ const logoAliases = {
|
||||
scrutinizer: 'scrutinizer-ci',
|
||||
stackoverflow: 'stack-overflow',
|
||||
tfs: 'azure-devops',
|
||||
travis: 'travisci',
|
||||
}
|
||||
const lightThreshold = 0.4
|
||||
const darkThreshold = 0.6
|
||||
@ -59,24 +58,6 @@ function decodeDataUrlFromQueryParam(value) {
|
||||
return isDataUrl(maybeDataUrl) ? maybeDataUrl : undefined
|
||||
}
|
||||
|
||||
function getShieldsIcon({ name, color }) {
|
||||
if (!(name in logos)) {
|
||||
return undefined
|
||||
}
|
||||
|
||||
const { svg, base64, isMonochrome } = logos[name]
|
||||
const svgColor = toSvgColor(color)
|
||||
if (svgColor) {
|
||||
if (isMonochrome) {
|
||||
return svg2base64(svg.replace(/fill="(.+?)"/g, `fill="${svgColor}"`))
|
||||
} else {
|
||||
return undefined
|
||||
}
|
||||
} else {
|
||||
return base64
|
||||
}
|
||||
}
|
||||
|
||||
function getSimpleIconStyle({ icon, style }) {
|
||||
const { hex } = icon
|
||||
if (style !== 'social' && brightness(normalizeColor(hex)) <= lightThreshold) {
|
||||
@ -93,7 +74,7 @@ function getSimpleIconStyle({ icon, style }) {
|
||||
// badge. If `size` is not 'auto', the icon will be displayed at its original.
|
||||
// https://github.com/badges/shields/pull/9191
|
||||
function getSimpleIcon({ name, color, style, size }) {
|
||||
const key = name === 'travis' ? 'travis-ci' : name.replace(/ /g, '-')
|
||||
const key = name.replace(/ /g, '-')
|
||||
|
||||
if (!(key in simpleIcons)) {
|
||||
return undefined
|
||||
@ -134,10 +115,7 @@ function prepareNamedLogo({ name, color, style, size }) {
|
||||
name = logoAliases[name]
|
||||
}
|
||||
|
||||
return (
|
||||
getShieldsIcon({ name, color }) ||
|
||||
getSimpleIcon({ name, color, style, size })
|
||||
)
|
||||
return getSimpleIcon({ name, color, style, size })
|
||||
}
|
||||
|
||||
function makeLogo(defaultNamedLogo, overrides) {
|
||||
@ -159,7 +137,6 @@ export {
|
||||
isDataUrl,
|
||||
decodeDataUrlFromQueryParam,
|
||||
prepareNamedLogo,
|
||||
getShieldsIcon,
|
||||
getSimpleIcon,
|
||||
makeLogo,
|
||||
}
|
||||
|
@ -1 +0,0 @@
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23.636 14.902c-1.602 6.43-8.114 10.342-14.543 8.74C2.666 22.037-1.246 15.525.357 9.098 1.96 2.669 8.47-1.244 14.897.359c6.43 1.602 10.341 8.115 8.739 14.544" fill="#f7931a"/><path d="M14.686 10.267c-.371 1.487-2.663.731-3.406.546l.655-2.629c.743.186 3.138.531 2.75 2.083m-.406 4.242c-.407 1.635-3.16.75-4.053.53l.724-2.9c.893.224 3.754.664 3.33 2.37m3.008-4.219c.238-1.596-.977-2.455-2.64-3.027l.54-2.163-1.318-.33-.525 2.107a54.292 54.292 0 0 0-1.054-.249l.53-2.12-1.317-.328-.54 2.162c-.286-.065-.567-.13-.84-.198l.001-.007-1.816-.453-.35 1.406s.977.224.956.238c.533.133.63.486.613.766l-.615 2.463c.038.01.085.024.137.045l-.138-.035-.862 3.452c-.065.161-.23.405-.604.312.014.02-.957-.239-.957-.239L5.836 15.6l1.714.427c.318.08.63.164.938.242l-.545 2.19 1.315.328.54-2.164c.36.097.708.187 1.05.271l-.538 2.156 1.316.328.546-2.183c2.245.424 3.933.253 4.643-1.777.574-1.635-.027-2.578-1.208-3.194.86-.198 1.508-.765 1.681-1.934" fill="#fff"/></svg>
|
Before Width: | Height: | Size: 1017 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" fill="#fff"><path d="M25 3a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h5v3H6a3 3 0 0 0-3 3v12H1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h2v6a3 3 0 0 0 3 3h42a3 3 0 0 0 3-3v-6h2a1 1 0 0 0 1-1V31a1 1 0 0 0-1-1h-2V18a3 3 0 0 0-3-3H33V4a1 1 0 0 0-1-1h-7zm-3.982 26a1.21 1.21 0 0 1 .837.355l1.29 1.29a1.21 1.21 0 0 1 0 1.709 1.21 1.21 0 0 1 0 .001l-6.291 6.29a1.21 1.21 0 0 1-1.71 0l-3.79-3.791a1.21 1.21 0 0 1 0-1.71l1.29-1.29a1.21 1.21 0 0 1 1.71 0L16 33.5l4.145-4.145a1.21 1.21 0 0 1 .873-.355zm19.962 0a1.21 1.21 0 0 1 .874.354l1.29 1.29a1.21 1.21 0 0 1 0 1.71l-6.29 6.289v.002a1.21 1.21 0 0 1-1.711 0l-3.79-3.79a1.21 1.21 0 0 1 0-1.71l1.29-1.29a1.21 1.21 0 0 1 1.71 0l1.645 1.645 4.147-4.146A1.21 1.21 0 0 1 40.98 29z"/></svg>
|
Before Width: | Height: | Size: 762 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="93 93 194 194"><defs><style>.b{fill:#fc6d26}</style></defs><path style="fill:#e24329" d="m282.83 170.73-.27-.69-26.14-68.22a6.81 6.81 0 0 0-2.69-3.24 7 7 0 0 0-8 .43 7 7 0 0 0-2.32 3.52l-17.65 54h-71.47l-17.65-54a6.86 6.86 0 0 0-2.32-3.53 7 7 0 0 0-8-.43 6.87 6.87 0 0 0-2.69 3.24L97.44 170l-.26.69a48.54 48.54 0 0 0 16.1 56.1l.09.07.24.17 39.82 29.82 19.7 14.91 12 9.06a8.07 8.07 0 0 0 9.76 0l12-9.06 19.7-14.91 40.06-30 .1-.08a48.56 48.56 0 0 0 16.08-56.04Z"/><path class="b" d="m282.83 170.73-.27-.69a88.3 88.3 0 0 0-35.15 15.8L190 229.25c19.55 14.79 36.57 27.64 36.57 27.64l40.06-30 .1-.08a48.56 48.56 0 0 0 16.1-56.08Z"/><path style="fill:#fca326" d="m153.43 256.89 19.7 14.91 12 9.06a8.07 8.07 0 0 0 9.76 0l12-9.06 19.7-14.91S209.55 244 190 229.25c-19.55 14.75-36.57 27.64-36.57 27.64Z"/><path class="b" d="M132.58 185.84A88.19 88.19 0 0 0 97.44 170l-.26.69a48.54 48.54 0 0 0 16.1 56.1l.09.07.24.17 39.82 29.82L190 229.21Z"/></svg>
|
Before Width: | Height: | Size: 986 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path d="M0 0h40v40H0V0z" fill="#cb0000"/><path fill="#fff" d="M7 7h26v26h-7V14h-6v19H7z"/></svg>
|
Before Width: | Height: | Size: 158 B |
@ -1 +0,0 @@
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19.715 6.133c.249-1.866 0-3.11-.999-4.266C17.634.622 15.721 0 13.307 0H6.235c-.418 0-.916.444-1 .889L2.323 20.622c0 .356.25.8.665.8h4.328l-.25 1.956c-.084.355.166.622.498.622h3.663c.417 0 .832-.267.915-.711v-.267l.749-4.622v-.178c.083-.444.5-.8.915-.8h.5c3.578 0 6.325-1.51 7.156-5.955.418-1.867.252-3.378-.747-4.445-.25-.355-.666-.622-1-.889" fill="#009cde"/><path d="M19.715 6.133c.249-1.866 0-3.11-.999-4.266C17.634.622 15.721 0 13.307 0H6.235c-.418 0-.916.444-1 .889L2.323 20.622c0 .356.25.8.665.8h4.328l1.164-7.378-.083.267c.084-.533.5-.889.998-.889h2.08c4.079 0 7.241-1.778 8.24-6.755-.083-.267 0-.356 0-.534" fill="#012169"/><path d="M9.563 6.133c.082-.266.25-.533.498-.71.166 0 .25-.09.416-.09h5.494c.666 0 1.33.09 1.83.178.166 0 .333 0 .498.089.168.089.334.089.418.178h.25c.248.089.497.266.748.355.248-1.866 0-3.11-.999-4.355C17.717.533 15.804 0 13.39 0H6.235c-.418 0-.916.356-1 .889L2.323 20.622c0 .356.25.8.665.8h4.328l1.164-7.378 1.084-7.91z" fill="#003087"/></svg>
|
Before Width: | Height: | Size: 1.0 KiB |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><style>.st0{fill:#a7a9ac}.st1{fill:#818285}.st2{fill:#58585a}.st3{fill:#d1d2d4}.st4{fill:#231f20}</style><path class="st0" d="M13.7 41.6h44v8.7h-44z"/><path class="st1" d="M13.7 55.8h44v8.7h-44z"/><path class="st2" d="M13.7 69h44v8.7h-44z"/><path class="st3" d="M13.7 27.6h44v8.7h-44z"/><path class="st4" d="M13.7 83.2h44v8.7h-44z"/><path fill="#992224" d="M63 41.6h18.7v8.7H63z"/><path fill="#630f16" d="M63 55.8h18.7v8.7H63z"/><path fill="#2b1415" d="M63 69h18.7v8.7H63z"/><path fill="#e7282d" d="M63 27.6h18.7v8.7H63z"/><path class="st4" d="M63 83.2h18.7v8.7H63z"/><g><path class="st0" d="M86.8 42h18.7v8.7H86.8z"/><path class="st1" d="M86.8 56.2h18.7v8.7H86.8z"/><path class="st2" d="M86.8 69.4h18.7v8.7H86.8z"/><path class="st3" d="M86.8 28h18.7v8.7H86.8z"/><path class="st4" d="M86.8 83.6h18.7v8.7H86.8z"/></g></svg>
|
Before Width: | Height: | Size: 884 B |
@ -1 +0,0 @@
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M2.273 10.463h19.325v3.978H2.273z" fill="#376db6"/><path d="M2.273 5.322h19.325V9.3H2.273z" fill="#4ca2da"/><path d="M18.575 0H5.374c-1.705 0-3.1 1.42-3.1 3.178V4.21h19.324V3.178C21.598 1.42 20.254 0 18.575 0z" fill="#91d8f4"/><path d="M2.273 15.578v1.033c0 1.757 1.396 3.178 3.1 3.178h8.268V24l4.081-4.211h.905c1.705 0 3.1-1.42 3.1-3.178v-1.033z" fill="#1e5397"/></svg>
|
Before Width: | Height: | Size: 439 B |
@ -1 +0,0 @@
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M2.594 0a.514.514 0 0 0-.344.11.404.404 0 0 0-.133.306v23.197c0 .124.048.246.145.312.096.065.208.075.332.075h5.593c.13 0 .243-.02.334-.093.092-.072.131-.2.112-.317l.002.023v-1.467a.367.367 0 0 0-.16-.301.612.612 0 0 0-.344-.087H5.613c-.11 0-.17-.02-.191-.037-.022-.016-.032-.03-.032-.1V2.408c0-.071.012-.094.041-.116.03-.023.102-.05.239-.05h2.488c.124 0 .235-.01.332-.076.097-.066.145-.188.145-.311V.416a.396.396 0 0 0-.157-.323A.583.583 0 0 0 8.131 0z" fill="#000"/><path d="M20.958 14.47c-1.482.414-2.489 1.273-2.489 2.684v4.042c0 3.017-2.909 2.685-6.517 2.685h-.56c-.223 0-.363-.083-.363-.277V22.22c0-.194.112-.277.336-.277h.447c2.154 0 3.664.47 3.664-1.245v-3.876c0-1.19.84-2.851 2.517-3.46.112-.028.14-.083.14-.138 0-.056-.028-.139-.14-.194-1.538-.692-2.517-1.827-2.517-3.184V5.473c0-1.689-1.51-3.377-3.664-3.377h-.447c-.224 0-.336-.083-.336-.277V.435c0-.194.14-.277.364-.277h.56c3.607 0 6.544 2.547 6.544 5.564v3.682c0 1.384 1.007 2.186 2.517 2.712.56.166.867.194.867.637v1.163c.028.249-.251.36-.923.553" fill="#2eace3"/><path d="M11.576 8.33c-.406 0-.785.303-.785.72v1.328c0 .389.35.721.785.721h1.482c.406 0 .784-.304.784-.72V9.05c0-.388-.348-.72-.784-.72z" fill="#000"/></svg>
|
Before Width: | Height: | Size: 1.2 KiB |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Z" fill="url(#a)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5.425 11.871a796.414 796.414 0 0 1 6.994-3.018c3.328-1.388 4.027-1.628 4.477-1.638.1 0 .32.02.47.14.12.1.15.23.17.33.02.1.04.31.02.47-.18 1.898-.96 6.504-1.36 8.622-.17.9-.5 1.199-.819 1.229-.7.06-1.229-.46-1.898-.9-1.06-.689-1.649-1.119-2.678-1.798-1.19-.78-.42-1.209.26-1.908.18-.18 3.247-2.978 3.307-3.228.01-.03.01-.15-.06-.21-.07-.06-.17-.04-.25-.02-.11.02-1.788 1.14-5.056 3.348-.48.33-.909.49-1.299.48-.43-.01-1.248-.24-1.868-.44-.75-.24-1.349-.37-1.299-.79.03-.22.33-.44.89-.669Z" fill="#fff"/><defs><linearGradient id="a" x1="11.99" y1="0" x2="11.99" y2="23.81" gradientUnits="userSpaceOnUse"><stop stop-color="#2AABEE"/><stop offset="1" stop-color="#229ED9"/></linearGradient></defs></svg>
|
Before Width: | Height: | Size: 909 B |
Before Width: | Height: | Size: 23 KiB |
@ -77,8 +77,8 @@ The endpoint badge takes a single required query param: <code>url</code>, which
|
||||
<tr>
|
||||
<td><code>namedLogo</code></td>
|
||||
<td>
|
||||
Default: none. One of the named logos supported by Shields
|
||||
or <a href="https://simpleicons.org/">simple-icons</a>. Can be
|
||||
Default: none. One of the
|
||||
<a href="https://simpleicons.org/">simple-icons</a> slugs. Can be
|
||||
overridden by the query string.
|
||||
</td>
|
||||
</tr>
|
||||
@ -90,9 +90,7 @@ The endpoint badge takes a single required query param: <code>url</code>, which
|
||||
<td><code>logoColor</code></td>
|
||||
<td>
|
||||
Default: none. Same meaning as the query string. Can be overridden by
|
||||
the query string. Only works for named logos and Shields logos. If you
|
||||
override the color of a multicolor Shield logo, the corresponding
|
||||
named logo will be used and colored.
|
||||
the query string. Only works for simple-icons logos.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
@ -1,6 +1,6 @@
|
||||
import zlib from 'zlib'
|
||||
import { expect } from 'chai'
|
||||
import { getShieldsIcon, getSimpleIcon } from '../../lib/logos.js'
|
||||
import { getSimpleIcon } from '../../lib/logos.js'
|
||||
import { createServiceTester } from '../tester.js'
|
||||
export const t = await createServiceTester()
|
||||
|
||||
@ -63,7 +63,7 @@ t.create('named logo')
|
||||
)
|
||||
.after((err, res, body) => {
|
||||
expect(err).not.to.be.ok
|
||||
expect(body).to.include(getShieldsIcon({ name: 'npm' }))
|
||||
expect(body).to.include(getSimpleIcon({ name: 'npm' }))
|
||||
})
|
||||
|
||||
t.create('named logo with color')
|
||||
@ -83,7 +83,7 @@ t.create('named logo with color')
|
||||
})
|
||||
|
||||
const logoSvg = Buffer.from(
|
||||
getShieldsIcon({ name: 'npm' }).replace('data:image/svg+xml;base64,', ''),
|
||||
getSimpleIcon({ name: 'npm' }).replace('data:image/svg+xml;base64,', ''),
|
||||
'base64',
|
||||
).toString('ascii')
|
||||
|
||||
@ -99,7 +99,7 @@ t.create('custom svg logo')
|
||||
)
|
||||
.after((err, res, body) => {
|
||||
expect(err).not.to.be.ok
|
||||
expect(body).to.include(getShieldsIcon({ name: 'npm' }))
|
||||
expect(body).to.include(getSimpleIcon({ name: 'npm' }))
|
||||
})
|
||||
|
||||
t.create('logoWidth')
|
||||
|