swcs/lucide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: added 100% preview with different stroke widths and in context with other icons (#1180)

Browse Source 
* feat: added 100% preview with different stroke widths

* feat: added 100% preview with different stroke widths

* fix: fixed detail section issue

* fix: added lost detail section

* feat: added cohesion preview
This commit is contained in:
Jakob Guddas
2023-05-06 15:02:52 +02:00
committed by GitHub
parent 17f9509f71
commit 016c9d1fac
2 changed files with 115 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/workflows/pull-request.yml
+86 -3
View File
@@ -22,8 +22,78 @@ jobs:
uses: tj-actions/changed-files@v35
with:
files: icons/*.svg
- name: Generate comment
id: generate-comment
- name: Generate cohesion check random
id: generate-cohesion-check-random
run: |
delimiter="$(openssl rand -hex 8)"
echo "body<<$delimiter" >> $GITHUB_OUTPUT
for file in $(printf "%s\\n" icons/*.svg | shuf | head -n$(awk -F' ' '{print NF}' <<< '${{ steps.changed-files.outputs.all_changed_files }}')); do
cat "$file" | # get file content
tr '\n' ' ' | # remove line breaks
sed -e 's/<svg[^>]*>/<svg>/g' | # remove attributes from svg element
base64 -w 0 | # encode svg
sed "s|.*|<img title=\"$file\" alt=\"$file\" src=\"https://lucide.dev/api/gh-icon/stroke-width/2/&.svg\"/> |"
done | tr '\n' ' ' >> $GITHUB_OUTPUT
echo >> $GITHUB_OUTPUT
echo "$delimiter" >> $GITHUB_OUTPUT
- name: Generate cohesion check squares
id: generate-cohesion-check-squares
run: |
delimiter="$(openssl rand -hex 8)"
echo "body<<$delimiter" >> $GITHUB_OUTPUT
for file in $(printf "%s\\n" icons/*square*.svg | shuf | head -n$(awk -F' ' '{print NF}' <<< '${{ steps.changed-files.outputs.all_changed_files }}')); do
cat "$file" | # get file content
tr '\n' ' ' | # remove line breaks
sed -e 's/<svg[^>]*>/<svg>/g' | # remove attributes from svg element
base64 -w 0 | # encode svg
sed "s|.*|<img title=\"$file\" alt=\"$file\" src=\"https://lucide.dev/api/gh-icon/stroke-width/2/&.svg\"/> |"
done | tr '\n' ' ' >> $GITHUB_OUTPUT
echo >> $GITHUB_OUTPUT
echo "$delimiter" >> $GITHUB_OUTPUT
- name: Generate 1px stroke-width
id: generate-1px-stroke-width
run: |
delimiter="$(openssl rand -hex 8)"
echo "body<<$delimiter" >> $GITHUB_OUTPUT
for file in ${{ steps.changed-files.outputs.all_changed_files }}; do
cat "$file" | # get file content
tr '\n' ' ' | # remove line breaks
sed -e 's/<svg[^>]*>/<svg>/g' | # remove attributes from svg element
base64 -w 0 | # encode svg
sed "s|.*|<img title=\"$file\" alt=\"$file\" src=\"https://lucide.dev/api/gh-icon/stroke-width/1/&.svg\"/> |"
done | tr '\n' ' ' >> $GITHUB_OUTPUT
echo >> $GITHUB_OUTPUT
echo "$delimiter" >> $GITHUB_OUTPUT
- name: Generate 2px stroke-width
id: generate-2px-stroke-width
run: |
delimiter="$(openssl rand -hex 8)"
echo "body<<$delimiter" >> $GITHUB_OUTPUT
for file in ${{ steps.changed-files.outputs.all_changed_files }}; do
cat "$file" | # get file content
tr '\n' ' ' | # remove line breaks
sed -e 's/<svg[^>]*>/<svg>/g' | # remove attributes from svg element
base64 -w 0 | # encode svg
sed "s|.*|<img title=\"$file\" alt=\"$file\" src=\"https://lucide.dev/api/gh-icon/stroke-width/2/&.svg\"/> |"
done | tr '\n' ' ' >> $GITHUB_OUTPUT
echo >> $GITHUB_OUTPUT
echo "$delimiter" >> $GITHUB_OUTPUT
- name: Generate 3px stroke-width
id: generate-3px-stroke-width
run: |
delimiter="$(openssl rand -hex 8)"
echo "body<<$delimiter" >> $GITHUB_OUTPUT
for file in ${{ steps.changed-files.outputs.all_changed_files }}; do
cat "$file" | # get file content
tr '\n' ' ' | # remove line breaks
sed -e 's/<svg[^>]*>/<svg>/g' | # remove attributes from svg element
base64 -w 0 | # encode svg
sed "s|.*|<img title=\"$file\" alt=\"$file\" src=\"https://lucide.dev/api/gh-icon/stroke-width/3/&.svg\"/> |"
done | tr '\n' ' ' >> $GITHUB_OUTPUT
echo >> $GITHUB_OUTPUT
echo "$delimiter" >> $GITHUB_OUTPUT
- name: Generate X-rays
id: generate-x-rays
run: |
delimiter="$(openssl rand -hex 8)"
echo "body<<$delimiter" >> $GITHUB_OUTPUT
@@ -50,8 +120,21 @@ jobs:
issue-number: ${{ github.event.pull_request.number }}
body: |
### Added or changed icons
${{ steps.generate-2px-stroke-width.outputs.body }}<br/>
<details>
<summary>Preview cohesion</summary>
${{ steps.generate-cohesion-check-squares.outputs.body }}<br/>
${{ steps.generate-2px-stroke-width.outputs.body }}<br/>
${{ steps.generate-cohesion-check-random.outputs.body }}<br/>
</details>
<details>
<summary>Preview stroke widths</summary>
${{ steps.generate-1px-stroke-width.outputs.body }}<br/>
${{ steps.generate-2px-stroke-width.outputs.body }}<br/>
${{ steps.generate-3px-stroke-width.outputs.body }}<br/>
</details>
<details>
<summary>Icon X-rays</summary>
${{ steps.generate-comment.outputs.body }}
${{ steps.generate-x-rays.outputs.body }}
</details>
edit-mode: replace
site/src/pages/api/gh-icon/stroke-width/[...data].tsx
+29
View File
@@ -0,0 +1,29 @@
import { parseSync } from 'svgson';
import { createLucideIcon, IconNode } from 'lucide-react';
export default async function handler(req, res) {
// ReactDOMServer needs to be imported dynamically
// https://github.com/vercel/next.js/issues/43810
const ReactDOMServer = (await import('react-dom/server')).default;
const url = req.url.split('/');
const src = Buffer.from(url.at(-1).slice(0, -4), 'base64').toString('utf8');
const Icon = createLucideIcon(
'icon',
parseSync(src.includes('<svg') ? src : `<svg>${src}</svg>`).children.map(
({ name, attributes }) => [name, attributes]
) as IconNode
);
const svg = Buffer.from(
ReactDOMServer.renderToString(<Icon strokeWidth={url.at(-2)} />).replace(
/>/,
'><style>@media screen and (prefers-color-scheme: dark) { svg { stroke: #fff } }</style>'
)
);
res.setHeader('Cache-Control', 'public,max-age=31536000');
res.setHeader('Content-Type', 'image/svg+xml');
res.status(200).end(svg);
}