kyouheicf/cf-icons

Cloudflare Icons https://cf-icons.pages.dev/ for your architecture diagram,
which is pulled from this npm public package @cloudflare/component-logo and @cloudflare/component-icon

To deploy on Cloudflare Pages, use the following env parameter

CI = false
YARN_VERSION = 1
ACCOUNT_HASH = YOUR_ACCOUNT_HASH

To reflect the latect icons data from component-icon, use the following command

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

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: </</p' data/*.svg
# Remove other tag
sed -i "" -e 's/<defs>.*<\/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/<svg/<svg fill="#0051c3"/g' data/*.svg
# Remove width height
sed -i "" -e 's/ width="[^"]*"//g' data/*.svg
sed -i "" -e 's/ height="[^"]*"//g' data/*.svg

# Get filename array
ls -1 | sed -e 's/\.svg$//' | while read line
do
  echo "'${line}'," 
done | pbcopy

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

Another great icon library is also here

• Brand Icons - Cloudflare Datamining