Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kyouheicf/cf-icons
https://github.com/kyouheicf/cf-icons
cloudflare cloudflare-pages
Last synced: 18 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/kyouheicf/cf-icons
- Owner: kyouheicf
- Created: 2023-10-11T02:52:22.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-04T15:26:39.000Z (11 months ago)
- Last Synced: 2024-11-14T01:32:22.176Z (3 months ago)
- Topics: cloudflare, cloudflare-pages
- Language: JavaScript
- Homepage: https://cf-icons.pages.dev
- Size: 1010 KB
- Stars: 8
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Cloudflare Icons
https://cf-icons.pages.dev/ for your architecture diagram,
which is pulled from this npm public package [@cloudflare/component-logo](https://www.npmjs.com/package/@cloudflare/component-logo) and [@cloudflare/component-icon](https://www.npmjs.com/package/@cloudflare/component-icon)
To deploy on Cloudflare Pages, use the following env parameter
```shell
CI = false
YARN_VERSION = 1
ACCOUNT_HASH = YOUR_ACCOUNT_HASH
```
To reflect the latect icons data from component-icon, use the following command
```shell:
cd cf-icons
npm i @cloudflare/component-icon
mkdir -p src/components/reactsvgs
cp -n node_modules/@cloudflare/component-icon/es/reactsvgs/* src/components/reactsvgs/
sed -i "" -e '1s/^/\/\* eslint-disable import\/first \*\/\n/' src/components/reactsvgs/*.js
```
To upload SVG into Cloudflare Images for external URL reference
```
# cd TO_SVG_FILES_DIR
ls -1 | while read line
do
curl -vvv --request POST \
https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/images/v1 \
-H "X-Auth-Email: $EMAIL" \
-H "X-Auth-Key: $APIKEY" \
--form 'file=@./'$line'' \
--form 'id='$(basename $line .svg)''
done
```
To pull the latect icons data from cloudflare-docs, use the following command
```shell:
git clone https://github.com/cloudflare/cloudflare-docs.git && cd $(basename $_ .git)
# Delete files except for data directry
ls|egrep -v '^data$'|xargs rm -fr
# yml to svg
grep "logo:" -rl data| sed 'p;s/\.yml/\.svg/' | xargs -n2 mv
# Delete other files
cd data && ls | grep -v -E '.svg' | xargs rm -r && cd ..
# Replace with SVG content
sed -i "" -n 's/logo: .*<\/defs>//g' data/*.svg
sed -i "" -e 's/<\/linearGradient><\/defs>//g' data/*.svg
# fill="#0051c3"
sed -i "" -e 's/ fill="[^"]*"//g' data/*.svg
sed -i "" -e 's/