Skip to content

Add SVG icon validation to pull requests - #24

Merged
simcheolhwan merged 3 commits into
mainfrom
ci/icon-validation
Aug 7, 2026
Merged

Add SVG icon validation to pull requests#24
simcheolhwan merged 3 commits into
mainfrom
ci/icon-validation

Conversation

@simcheolhwan

@simcheolhwan simcheolhwan commented Aug 5, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Add CI validation for SVG icon structure and styling
  • Add Node.js version configuration and repository guidance
  • Add and update the icon set across navigation, finance, charts, communication, and utility categories

Testing

  • Not run (not requested)

Summary by CodeRabbit

  • New Features

    • Added automated SVG icon validation for filenames, structure, dimensions, fills, and path data.
    • Added test coverage for valid and invalid icon files.
  • Chores

    • Added pull-request checks that run linting, tests, and builds automatically.
    • Updated the project to use the latest Node.js LTS and refreshed development tooling.
  • Documentation

    • Updated icon contribution requirements, verification steps, and release guidance.

Document and enforce fill-only 16x16 SVG source rules.
Validate path data and run lint tests in pull request CI.
Normalize existing icons to satisfy the enforced constraints.
@coderabbitai

coderabbitai Bot commented Aug 5, 2026

Copy link
Copy Markdown

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: e539f728-4469-4f90-aad2-e4b035327f67

📥 Commits

Reviewing files that changed from the base of the PR and between b16ba32 and 354a29e.

📒 Files selected for processing (3)
  • CONTRIBUTING.md
  • lintIcons.js
  • lintIcons.test.mjs
🚧 Files skipped from review as they are similar to previous changes (2)
  • lintIcons.js
  • lintIcons.test.mjs

Walkthrough

The repository adds a standalone SVG linter, Vitest coverage, lint and test scripts, build-time linting, updated contribution guidance, and a pull-request workflow using Node.js LTS and pnpm.

Changes

SVG validation workflow

Layer / File(s) Summary
SVG requirements and contributor guidance
.nvmrc, AGENTS.md, CLAUDE.md, CONTRIBUTING.md
The documentation defines Node.js LTS, pnpm 11, fill-only 16×16 SVG requirements, verification steps, checklist items, release instructions, and the AGENTS.md reference.
SVG linter and validation tests
lintIcons.js, lintIcons.test.mjs
The linter validates filenames, SVG structure, attributes, dimensions, viewBox, fills, and path data. Tests cover valid SVGs, missing attributes, executable attributes, document declarations, and invalid path data.
Package scripts and pull-request checks
package.json, .github/workflows/pull-request.yml
Package scripts run linting before optimization and expose tests. The workflow installs dependencies with a frozen lockfile, then runs tests and the build.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant PullRequest
  participant GitHubActions
  participant pnpm
  participant lintIcons
  participant SVGO
  PullRequest->>GitHubActions: open or update pull request
  GitHubActions->>pnpm: install with frozen lockfile
  GitHubActions->>pnpm: run test
  GitHubActions->>pnpm: run build
  pnpm->>lintIcons: run SVG linting
  lintIcons-->>pnpm: return validation status
  pnpm->>SVGO: optimize SVGs
  SVGO-->>GitHubActions: return build status
Loading

Poem

I hop through paths, both neat and bright,
I check each fill in morning light.
Tests and lint now guard the gate,
The workflow checks each icon’s state.
Clean builds rise and bunnies fly! 🐇

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly and concisely describes the main change: adding SVG icon validation to pull requests.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch ci/icon-validation

Comment @coderabbitai help to get the list of available commands.

@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Aug 5, 2026

Copy link
Copy Markdown

Deploying icons with  Cloudflare Pages  Cloudflare Pages

Latest commit: 354a29e
Status: ✅  Deploy successful!
Preview URL: https://18956a26.icons-3vy.pages.dev
Branch Preview URL: https://ci-icon-validation.icons-3vy.pages.dev

View logs

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🧹 Nitpick comments (1)
.nvmrc (1)

1-1: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Pin the Node.js version used by the repository.

Both GitHub Actions workflows read .nvmrc, so lts/* can select a different Node.js major after a future LTS transition. Set .nvmrc to the exact version used by CI and local development, and update AGENTS.md when the version changes.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In @.nvmrc at line 1, Replace the moving lts/* value in .nvmrc with the exact
Node.js version used by CI and local development, then update the Node.js
version reference in AGENTS.md to match.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.github/workflows/pull-request.yml:
- Line 14: Update the actions/checkout step in the pull-request workflow to set
persist-credentials to false before running pnpm install, pnpm test, and pnpm
build, while preserving the existing checkout behavior.

In `@AGENTS.md`:
- Around line 70-73: Update both documented command checklists in AGENTS.md to
include pnpm test alongside pnpm install, pnpm lint, and pnpm run build.

In `@lintIcons.js`:
- Around line 33-42: Update the attribute validation loop in lintIcons.js to
reject every on* SVG attribute, including onclick, using per-element allowlists
for explicitly permitted event attributes. Add a regression test covering a
disallowed executable attribute and verify the corresponding element is
rejected.

---

Nitpick comments:
In @.nvmrc:
- Line 1: Replace the moving lts/* value in .nvmrc with the exact Node.js
version used by CI and local development, then update the Node.js version
reference in AGENTS.md to match.
🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 817bd3f3-525a-4000-9f0e-186df7547b11

📥 Commits

Reviewing files that changed from the base of the PR and between a13381f and 860b556.

⛔ Files ignored due to path filters (129)
  • icons/AddFilled.svg is excluded by !**/*.svg
  • icons/Adjust.svg is excluded by !**/*.svg
  • icons/ArrowDown.svg is excluded by !**/*.svg
  • icons/ArrowDownFilled.svg is excluded by !**/*.svg
  • icons/ArrowLeft.svg is excluded by !**/*.svg
  • icons/ArrowRight.svg is excluded by !**/*.svg
  • icons/ArrowUp.svg is excluded by !**/*.svg
  • icons/ArrowUpDown.svg is excluded by !**/*.svg
  • icons/ArrowUpRight.svg is excluded by !**/*.svg
  • icons/ArrowsLeftRight.svg is excluded by !**/*.svg
  • icons/Ascending.svg is excluded by !**/*.svg
  • icons/Back.svg is excluded by !**/*.svg
  • icons/Bank.svg is excluded by !**/*.svg
  • icons/BarChartInitia.svg is excluded by !**/*.svg
  • icons/Bridge.svg is excluded by !**/*.svg
  • icons/Burn.svg is excluded by !**/*.svg
  • icons/Buy.svg is excluded by !**/*.svg
  • icons/Calendar.svg is excluded by !**/*.svg
  • icons/CancelCircle.svg is excluded by !**/*.svg
  • icons/CaretDown.svg is excluded by !**/*.svg
  • icons/CaretLeft.svg is excluded by !**/*.svg
  • icons/CaretRight.svg is excluded by !**/*.svg
  • icons/CaretUp.svg is excluded by !**/*.svg
  • icons/Chains.svg is excluded by !**/*.svg
  • icons/Chart.svg is excluded by !**/*.svg
  • icons/Check.svg is excluded by !**/*.svg
  • icons/CheckCircle.svg is excluded by !**/*.svg
  • icons/CheckCircleFilled.svg is excluded by !**/*.svg
  • icons/ChevronDown.svg is excluded by !**/*.svg
  • icons/ChevronLeft.svg is excluded by !**/*.svg
  • icons/ChevronRight.svg is excluded by !**/*.svg
  • icons/ChevronUp.svg is excluded by !**/*.svg
  • icons/ChevronsDown.svg is excluded by !**/*.svg
  • icons/ChevronsRight.svg is excluded by !**/*.svg
  • icons/CircleDashed.svg is excluded by !**/*.svg
  • icons/Clock.svg is excluded by !**/*.svg
  • icons/ClockFilled.svg is excluded by !**/*.svg
  • icons/Close.svg is excluded by !**/*.svg
  • icons/CloseCircle.svg is excluded by !**/*.svg
  • icons/CloseCircleFilled.svg is excluded by !**/*.svg
  • icons/Contact.svg is excluded by !**/*.svg
  • icons/ContactBook.svg is excluded by !**/*.svg
  • icons/Copy.svg is excluded by !**/*.svg
  • icons/Diamond.svg is excluded by !**/*.svg
  • icons/Dice.svg is excluded by !**/*.svg
  • icons/Discord.svg is excluded by !**/*.svg
  • icons/DocsFilled.svg is excluded by !**/*.svg
  • icons/DotsVertical.svg is excluded by !**/*.svg
  • icons/Download.svg is excluded by !**/*.svg
  • icons/DragHandle.svg is excluded by !**/*.svg
  • icons/DropInitia.svg is excluded by !**/*.svg
  • icons/Ecosystem.svg is excluded by !**/*.svg
  • icons/Edit.svg is excluded by !**/*.svg
  • icons/Export.svg is excluded by !**/*.svg
  • icons/ExternalLink.svg is excluded by !**/*.svg
  • icons/Filter.svg is excluded by !**/*.svg
  • icons/FilterSearch.svg is excluded by !**/*.svg
  • icons/Forum.svg is excluded by !**/*.svg
  • icons/Gauge.svg is excluded by !**/*.svg
  • icons/Gavel.svg is excluded by !**/*.svg
  • icons/Github.svg is excluded by !**/*.svg
  • icons/GppMaybeFilled.svg is excluded by !**/*.svg
  • icons/Grid.svg is excluded by !**/*.svg
  • icons/GridThin.svg is excluded by !**/*.svg
  • icons/Heart.svg is excluded by !**/*.svg
  • icons/HeartFilled.svg is excluded by !**/*.svg
  • icons/Hide.svg is excluded by !**/*.svg
  • icons/History.svg is excluded by !**/*.svg
  • icons/Home.svg is excluded by !**/*.svg
  • icons/Hourglass.svg is excluded by !**/*.svg
  • icons/IUSD.svg is excluded by !**/*.svg
  • icons/Image.svg is excluded by !**/*.svg
  • icons/Import.svg is excluded by !**/*.svg
  • icons/Info.svg is excluded by !**/*.svg
  • icons/InfoFilled.svg is excluded by !**/*.svg
  • icons/LayoutSidebar.svg is excluded by !**/*.svg
  • icons/Link.svg is excluded by !**/*.svg
  • icons/List.svg is excluded by !**/*.svg
  • icons/ListDetails.svg is excluded by !**/*.svg
  • icons/ListThin.svg is excluded by !**/*.svg
  • icons/Lock.svg is excluded by !**/*.svg
  • icons/Maximize.svg is excluded by !**/*.svg
  • icons/Member.svg is excluded by !**/*.svg
  • icons/Menu.svg is excluded by !**/*.svg
  • icons/Minus.svg is excluded by !**/*.svg
  • icons/More.svg is excluded by !**/*.svg
  • icons/MoreVert.svg is excluded by !**/*.svg
  • icons/Note.svg is excluded by !**/*.svg
  • icons/Notification.svg is excluded by !**/*.svg
  • icons/Pay.svg is excluded by !**/*.svg
  • icons/Plus.svg is excluded by !**/*.svg
  • icons/Pool.svg is excluded by !**/*.svg
  • icons/PoolSparkles.svg is excluded by !**/*.svg
  • icons/Privacy.svg is excluded by !**/*.svg
  • icons/QrCode.svg is excluded by !**/*.svg
  • icons/QuestionFilled.svg is excluded by !**/*.svg
  • icons/Refresh.svg is excluded by !**/*.svg
  • icons/ReplayFilled.svg is excluded by !**/*.svg
  • icons/Reward.svg is excluded by !**/*.svg
  • icons/Sad.svg is excluded by !**/*.svg
  • icons/Search.svg is excluded by !**/*.svg
  • icons/Selector.svg is excluded by !**/*.svg
  • icons/Send.svg is excluded by !**/*.svg
  • icons/Setting.svg is excluded by !**/*.svg
  • icons/SettingFilled.svg is excluded by !**/*.svg
  • icons/ShoppingBag.svg is excluded by !**/*.svg
  • icons/Show.svg is excluded by !**/*.svg
  • icons/Shuffle.svg is excluded by !**/*.svg
  • icons/SignOut.svg is excluded by !**/*.svg
  • icons/Star.svg is excluded by !**/*.svg
  • icons/StarFilled.svg is excluded by !**/*.svg
  • icons/Swap.svg is excluded by !**/*.svg
  • icons/SwapVert.svg is excluded by !**/*.svg
  • icons/Tag.svg is excluded by !**/*.svg
  • icons/Trash.svg is excluded by !**/*.svg
  • icons/Twitter.svg is excluded by !**/*.svg
  • icons/Unlock.svg is excluded by !**/*.svg
  • icons/User.svg is excluded by !**/*.svg
  • icons/UserSquare.svg is excluded by !**/*.svg
  • icons/UserThin.svg is excluded by !**/*.svg
  • icons/VerifiedSharpFilled.svg is excluded by !**/*.svg
  • icons/Voltage.svg is excluded by !**/*.svg
  • icons/Vote.svg is excluded by !**/*.svg
  • icons/Wallet.svg is excluded by !**/*.svg
  • icons/WalletThin.svg is excluded by !**/*.svg
  • icons/Warning.svg is excluded by !**/*.svg
  • icons/WarningFilled.svg is excluded by !**/*.svg
  • icons/World.svg is excluded by !**/*.svg
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (7)
  • .github/workflows/pull-request.yml
  • .nvmrc
  • AGENTS.md
  • CLAUDE.md
  • lintIcons.js
  • lintIcons.test.mjs
  • package.json

Comment thread .github/workflows/pull-request.yml
Comment thread AGENTS.md
Comment thread lintIcons.js Outdated
@simcheolhwan
simcheolhwan requested a review from evilpeach August 5, 2026 05:15
@simcheolhwan
simcheolhwan marked this pull request as ready for review August 5, 2026 05:15

@evilpeach evilpeach left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should we still have the CONTRIBUTION.md?

# Contributing

See [AGENTS.md](AGENTS.md) for icon contribution and release guidelines.

Comment thread lintIcons.js
Reject XML metadata outside allowed SVG content.
Keep CONTRIBUTING.md as GitHub's contributor entry point.
@simcheolhwan

Copy link
Copy Markdown
Contributor Author

Kept CONTRIBUTING.md as the standard GitHub contribution entry point and linked it to AGENTS.md, which contains the detailed guidelines.

Implemented in commit 354a29ef68b588d31dc3931b7af0a7190a1d9b66.

@simcheolhwan
simcheolhwan requested a review from evilpeach August 7, 2026 11:13
@simcheolhwan
simcheolhwan merged commit e39ca5d into main Aug 7, 2026
6 checks passed
@simcheolhwan
simcheolhwan deleted the ci/icon-validation branch August 7, 2026 11:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants