A manager for Pathfinder 2e that allows searching, saving and printing items and spells.

Deployed at https://emandm.github.io/pathfinder-2e-manager/

npm install

npm run dev

npm run build

npm run scraper

See src/styles/element/index.scss.

This project was bootstraped from element-plus-vite-starter. and inspired by Pathfinder-2e-Spell-DB.

• Web framework - Vue
• Component library - Element Plus
• Page routing - Unplugin Vue Router
• Markdown - Unplugin Vue markdown
• CSS Utility - UnoCSS: provides composable css features following the idea of atomic css
• CSS - Sass and UnoCSS
• Bundler - Vite
• Linting - EsLint, configured by antfu
• Icons - Unplugin Icons using mainly Material Symbols Light

Search for the icon you want to use. Prefer the material symbols light icon set. If none match, search for any icon on Iconify.

Once chosen, copy the name of the icon (e.g. material-symbols-light:crown).

Note: You can change the dropdown to the option that shows (UnoCSS) to get the correct name with no change required.

Use the icon in HTML using the el-icon component from Element Plus. Add i as the prefix for the name, and swap the : for a -

The final name convention is i-{icon set name}-{icon name} (e.g. i-material-symbols-light-crown)

<el-icon size="18" color="hotpink">
  <i-material-symbols-light-crown />
</el-icon>

You can use msl as a shorthand for material-symbols-light

<el-icon size="18" color="hotpink">
  <i-msl-crown />
</el-icon>

You can also use the i html attribute to apply the icon. Note, this does not allow the msl shorthand.

<div inline-flex i="material-symbols-light-crown"></div>