From a253682eb83e750e159e1543d3acdbafacb0d259 Mon Sep 17 00:00:00 2001 From: Alexandre Paradis Date: Sun, 9 Jan 2022 16:04:36 -0500 Subject: [PATCH] Add some icons in Readme (#4816) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Add some icons in Readme * Align icons at left * Add some more icons * Remove inline image - Use relative icons path * Format Third Party Extensions as a table * force website build * added readme-icons foler with icons for the readme.md file, as well as icons for light and dark modes in the readme.md titles * restored corrupted svgs for readme-icons * moved the icons to asset/readme, added icons for Drawio, Hexo and Jetpack Compose * - Use `develop` branch absolutified links for README images - Strip dark image theme links before publish to Github and npm - Clean third party extensions table * Commit to tag (ony inside master branch) * Fix differences in README * Reintroduce link in README logo * Drop uneeded newline from README * Fix error in README * Add newlines for SVGs * Newlines for all SVGs * Reuse black icons from library * Commit using Github Actions bot * Reuse diagrams.net library icon for white version * Fix comment * Bump 'strip-gh-theme-links' action to v2 * removed assets/readme icons * Test with 'fill=white' * Test with 'style="fill:white"' * added filter:invert(1) to PHP, TS, Simple Icons and Blender * added readme-icons test, changed the name of light icons in assets/readme * reloaded icons in Readme * fixed typo in iconsPath for readme-icons test * fixed typo on the darkiconsPath resolution * restored absolute paths * minimized the white icons on assets/readme * restored test scripts * Apply changes * Disable color output testing in CI * Revert latest change Co-authored-by: Eric Cornelissen Co-authored-by: Álvaro Mondéjar Co-authored-by: Jorge Amado Soria Ramirez --- .github/workflows/publish.yml | 17 +++++++++ README.md | 49 +++++++++++++------------- assets/readme/blender-white.svg | 1 + assets/readme/diagramsdotnet-white.svg | 1 + assets/readme/drupal-white.svg | 1 + assets/readme/flutter-white.svg | 1 + assets/readme/hexo-white.svg | 1 + assets/readme/homeassistant-white.svg | 1 + assets/readme/kirby-white.svg | 1 + assets/readme/laravel-white.svg | 1 + assets/readme/nodedotjs-white.svg | 1 + assets/readme/php-white.svg | 1 + assets/readme/python-white.svg | 1 + assets/readme/react-white.svg | 1 + assets/readme/simpleicons-white.svg | 1 + assets/readme/svelte-white.svg | 1 + assets/readme/typescript-white.svg | 1 + assets/readme/vuedotjs-white.svg | 1 + assets/readme/wordpress-white.svg | 1 + tests/readme-icons.test.js | 34 ++++++++++++++++++ 20 files changed, 93 insertions(+), 24 deletions(-) create mode 100644 assets/readme/blender-white.svg create mode 100644 assets/readme/diagramsdotnet-white.svg create mode 100644 assets/readme/drupal-white.svg create mode 100644 assets/readme/flutter-white.svg create mode 100644 assets/readme/hexo-white.svg create mode 100644 assets/readme/homeassistant-white.svg create mode 100644 assets/readme/kirby-white.svg create mode 100644 assets/readme/laravel-white.svg create mode 100644 assets/readme/nodedotjs-white.svg create mode 100644 assets/readme/php-white.svg create mode 100644 assets/readme/python-white.svg create mode 100644 assets/readme/react-white.svg create mode 100644 assets/readme/simpleicons-white.svg create mode 100644 assets/readme/svelte-white.svg create mode 100644 assets/readme/typescript-white.svg create mode 100644 assets/readme/vuedotjs-white.svg create mode 100644 assets/readme/wordpress-white.svg create mode 100644 tests/readme-icons.test.js diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 6d53821a..e45414b4 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -48,6 +48,11 @@ jobs: key: ${{ runner.os }}-node-${{ hashFiles('**/package.json') }} restore-keys: | ${{ runner.os }}-node- + - name: Remove dark theme images from README + uses: mondeja/strip-gh-theme-links@v2 + with: + files: README.md + strict: true - name: Install dependencies run: npm i - name: Deploy to NPM @@ -69,6 +74,18 @@ jobs: run: | export PACKAGE_VERSION=$(cat package.json | grep 'version' | sed 's/[ \",:]//g' | sed 's/version//') echo "::set-output name=version::$PACKAGE_VERSION" + - name: Remove dark theme images from README + uses: mondeja/strip-gh-theme-links@v2 + with: + files: README.md + strict: true + # Add commit that will only be included in the tag + - name: Commit dark theme images strip + run: | + git config --global user.email "github-actions[bot]@users.noreply.github.com" + git config --global user.name "github-actions[bot]" + git add README.md + git commit -m 'Strip README dark theme image links' - name: Create and push git tag uses: actions-ecosystem/action-push-tag@v1 with: diff --git a/README.md b/README.md index e7e1289f..d9741022 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,7 @@

-Simple Icons +Simple Icons +Simple Icons

Simple Icons

@@ -8,9 +9,9 @@ Over 2100 Free SVG icons for popular brands. See them all on one page at

-Build status -NPM version -Build status +Build status +NPM version +Build status

## Usage @@ -39,7 +40,7 @@ Where `[ICON SLUG]` is replaced by the [slug] of the icon you want to use, for e These examples use the latest major version. This means you won't receive any updates following the next major release. You can use `@latest` instead to receive updates indefinitely. However, this will result in a `404` error if the icon is removed. -### Node Usage +### Node Usage NodeNode The icons are also available through our npm package. To install, simply run: @@ -105,16 +106,16 @@ This is useful if you want to do a computation on every icon: const simpleIcons = require('simple-icons'); for (const iconSlug in simpleIcons) { - const icon = simpleIcons.Get(iconSlug); - // do stuff + const icon = simpleIcons.Get(iconSlug); + // do stuff } ``` -#### TypeScript Usage +#### TypeScript Usage TypescriptTypescript Type definitions are bundled with the package. -### PHP Usage +### PHP Usage PhpPhp The icons are also available through our Packagist package. To install, simply run: @@ -139,21 +140,21 @@ echo file_get_contents('path/to/package/icons/simpleicons.svg'); ## Third-Party Extensions | Extension | Author | -| :--- | :--- | -| [Blender add-on](https://github.com/mondeja/simple-icons-blender) | [@mondeja](https://github.com/mondeja) | -| [Drawio library](https://github.com/mondeja/simple-icons-drawio) | [@mondeja](https://github.com/mondeja) | -| [Drupal module](https://www.drupal.org/project/simple_icons) | [Phil Wolstenholme](https://www.drupal.org/u/phil-wolstenholme) | -| [Flutter package](https://pub.dev/packages/simple_icons) | [@jlnrrg](https://jlnrrg.github.io/) | -| [Hexo plugin](https://github.com/nidbCN/hexo-simpleIcons) | [@nidbCN](https://github.com/nidbCN/) | -| [Home Assistant plugin](https://github.com/vigonotion/hass-simpleicons) | [@vigonotion](https://github.com/vigonotion/) | -| [Jetpack Compose library](https://github.com/DevSrSouza/compose-icons) | [@devsrsouza](https://github.com/devsrsouza/) | -| [Kirby plugin](https://github.com/runxel/kirby3-simpleicons) | [@runxel](https://github.com/runxel) | -| [Laravel Package](https://github.com/ublabs/blade-simple-icons) | [@adrian-ub](https://github.com/adrian-ub) | -| [Python package](https://github.com/sachinraja/simple-icons-py) | [@sachinraja](https://github.com/sachinraja) | -| [React package](https://github.com/icons-pack/react-simple-icons) | [@wootsbot](https://github.com/wootsbot) | -| [Svelte package](https://github.com/icons-pack/svelte-simple-icons) | [@wootsbot](https://github.com/wootsbot) | -| [Vue package](https://github.com/mainvest/vue-simple-icons) | [@noahlitvin](https://github.com/noahlitvin) | -| [WordPress plugin](https://wordpress.org/plugins/simple-icons/) | [@tjtaylo](https://github.com/tjtaylo) | +| :-- | :-- | +| BlenderBlender [Blender add-on](https://github.com/mondeja/simple-icons-blender) | [@mondeja](https://github.com/mondeja) | +| DrawioDrawio [Drawio library](https://github.com/mondeja/simple-icons-drawio) | [@mondeja](https://github.com/mondeja) | +| DrupalDrupal [Drupal module](https://www.drupal.org/project/simple_icons) | [Phil Wolstenholme](https://www.drupal.org/u/phil-wolstenholme) | +| FlutterFlutter [Flutter package](https://pub.dev/packages/simple_icons) | [@jlnrrg](https://jlnrrg.github.io/) | +| HexoHexo [Hexo plugin](https://github.com/nidbCN/hexo-simpleIcons) | [@nidbCN](https://github.com/nidbCN/) | +| Home AssistantHome Assistant [Home Assistant plugin](https://github.com/vigonotion/hass-simpleicons) | [@vigonotion](https://github.com/vigonotion/) | +| Jetpack ComposeJetpack Compose [Jetpack Compose library](https://github.com/DevSrSouza/compose-icons) | [@devsrsouza](https://github.com/devsrsouza/) | +| KirbyKirby [Kirby plugin](https://github.com/runxel/kirby3-simpleicons) | [@runxel](https://github.com/runxel) | +| LaravelLaravel [Laravel Package](https://github.com/ublabs/blade-simple-icons) | [@adrian-ub](https://github.com/adrian-ub) | +| PythonPython [Python package](https://github.com/sachinraja/simple-icons-py) | [@sachinraja](https://github.com/sachinraja) | +| ReactReact [React package](https://github.com/icons-pack/react-simple-icons) | [@wootsbot](https://github.com/wootsbot) | +| SvelteSvelte [Svelte package](https://github.com/icons-pack/svelte-simple-icons) | [@wootsbot](https://github.com/wootsbot) | +| VueVue [Vue package](https://github.com/mainvest/vue-simple-icons) | [@noahlitvin](https://github.com/noahlitvin) | +| WordpressWordpress [WordPress plugin](https://wordpress.org/plugins/simple-icons/) | [@tjtaylo](https://github.com/tjtaylo) | [slug]: ./slugs.md diff --git a/assets/readme/blender-white.svg b/assets/readme/blender-white.svg new file mode 100644 index 00000000..bb4810a0 --- /dev/null +++ b/assets/readme/blender-white.svg @@ -0,0 +1 @@ +Blender \ No newline at end of file diff --git a/assets/readme/diagramsdotnet-white.svg b/assets/readme/diagramsdotnet-white.svg new file mode 100644 index 00000000..d0fd5081 --- /dev/null +++ b/assets/readme/diagramsdotnet-white.svg @@ -0,0 +1 @@ +diagrams.net \ No newline at end of file diff --git a/assets/readme/drupal-white.svg b/assets/readme/drupal-white.svg new file mode 100644 index 00000000..d53a9986 --- /dev/null +++ b/assets/readme/drupal-white.svg @@ -0,0 +1 @@ +Drupal \ No newline at end of file diff --git a/assets/readme/flutter-white.svg b/assets/readme/flutter-white.svg new file mode 100644 index 00000000..3fd3bfb2 --- /dev/null +++ b/assets/readme/flutter-white.svg @@ -0,0 +1 @@ +Flutter \ No newline at end of file diff --git a/assets/readme/hexo-white.svg b/assets/readme/hexo-white.svg new file mode 100644 index 00000000..ecbcdff1 --- /dev/null +++ b/assets/readme/hexo-white.svg @@ -0,0 +1 @@ +Hexo \ No newline at end of file diff --git a/assets/readme/homeassistant-white.svg b/assets/readme/homeassistant-white.svg new file mode 100644 index 00000000..ec9813d5 --- /dev/null +++ b/assets/readme/homeassistant-white.svg @@ -0,0 +1 @@ +Home Assistant \ No newline at end of file diff --git a/assets/readme/kirby-white.svg b/assets/readme/kirby-white.svg new file mode 100644 index 00000000..79958843 --- /dev/null +++ b/assets/readme/kirby-white.svg @@ -0,0 +1 @@ +Kirby \ No newline at end of file diff --git a/assets/readme/laravel-white.svg b/assets/readme/laravel-white.svg new file mode 100644 index 00000000..3edfcea5 --- /dev/null +++ b/assets/readme/laravel-white.svg @@ -0,0 +1 @@ +Laravel \ No newline at end of file diff --git a/assets/readme/nodedotjs-white.svg b/assets/readme/nodedotjs-white.svg new file mode 100644 index 00000000..ed8a6959 --- /dev/null +++ b/assets/readme/nodedotjs-white.svg @@ -0,0 +1 @@ +Node.js \ No newline at end of file diff --git a/assets/readme/php-white.svg b/assets/readme/php-white.svg new file mode 100644 index 00000000..f20b708b --- /dev/null +++ b/assets/readme/php-white.svg @@ -0,0 +1 @@ +PHP \ No newline at end of file diff --git a/assets/readme/python-white.svg b/assets/readme/python-white.svg new file mode 100644 index 00000000..452d9b7e --- /dev/null +++ b/assets/readme/python-white.svg @@ -0,0 +1 @@ +Python \ No newline at end of file diff --git a/assets/readme/react-white.svg b/assets/readme/react-white.svg new file mode 100644 index 00000000..a1197a26 --- /dev/null +++ b/assets/readme/react-white.svg @@ -0,0 +1 @@ +React \ No newline at end of file diff --git a/assets/readme/simpleicons-white.svg b/assets/readme/simpleicons-white.svg new file mode 100644 index 00000000..21bd6b51 --- /dev/null +++ b/assets/readme/simpleicons-white.svg @@ -0,0 +1 @@ +Simple Icons \ No newline at end of file diff --git a/assets/readme/svelte-white.svg b/assets/readme/svelte-white.svg new file mode 100644 index 00000000..4a04412d --- /dev/null +++ b/assets/readme/svelte-white.svg @@ -0,0 +1 @@ +Svelte \ No newline at end of file diff --git a/assets/readme/typescript-white.svg b/assets/readme/typescript-white.svg new file mode 100644 index 00000000..968ff97e --- /dev/null +++ b/assets/readme/typescript-white.svg @@ -0,0 +1 @@ +TypeScript \ No newline at end of file diff --git a/assets/readme/vuedotjs-white.svg b/assets/readme/vuedotjs-white.svg new file mode 100644 index 00000000..1c9e2bee --- /dev/null +++ b/assets/readme/vuedotjs-white.svg @@ -0,0 +1 @@ +Vue.js \ No newline at end of file diff --git a/assets/readme/wordpress-white.svg b/assets/readme/wordpress-white.svg new file mode 100644 index 00000000..25ed7792 --- /dev/null +++ b/assets/readme/wordpress-white.svg @@ -0,0 +1 @@ +WordPress \ No newline at end of file diff --git a/tests/readme-icons.test.js b/tests/readme-icons.test.js new file mode 100644 index 00000000..91cd8fa8 --- /dev/null +++ b/tests/readme-icons.test.js @@ -0,0 +1,34 @@ +import { promises as fs } from 'node:fs'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; +import { test, exec } from 'uvu'; +import * as assert from 'uvu/assert'; + +(async () => { + const __dirname = path.dirname(fileURLToPath(import.meta.url)), + root = path.dirname(__dirname), + darkIconsPath = path.join(root, 'icons'), + lightIconsPath = path.join(root, 'assets', 'readme'), + lightIconsFileNames = await fs.readdir(lightIconsPath); + + for (let lightIconFileName of lightIconsFileNames) { + const lightIconPath = path.join(lightIconsPath, lightIconFileName), + darkIconPath = path.join( + darkIconsPath, + lightIconFileName.replace(/-white\.svg$/, '.svg'), + ), + lightIconRelPath = path.relative(root, lightIconPath), + darkIconRelPath = path.relative(root, darkIconPath), + lightIconContent = await fs.readFile(lightIconPath, 'utf8'), + darkIconContent = await fs.readFile(darkIconPath, 'utf8'); + + test(`'${lightIconRelPath}' content must be equivalent to '${darkIconRelPath}' content`, () => { + assert.equal( + lightIconContent.replace(' fill="white"', ''), + darkIconContent, + ); + }); + } + test.run(); + exec(); +})();