Files
lucide/docs/contribute/affinity-designer-guide.md
Eric Fennis 484f2c9cd3 docs(version-1): Version 1 website (#4142)
* Update images

* Adjust color

* update accessebility

* Add matrix hero

* Add typescript documentation

* Add basics section to vue pages

* Add svelte docs

* Fix dynamic sidebar

* Add animation?

* Some adjustments

* Adjust animation

* Updates docs

* Add scaledown animation

* Add docs for vue types

* Fix layout accessibility page

* fix framework select

* adjust easing home animation

* Write docs for Vue

* Adjust animation home

* Adjust home hero animation

* Finish svelte docs

* Add solid pages

* remove spiral animation component

* Add group icons

* Added solid docs

* update preact docs

* Adjust examples preact docs

* Add snackplayer

* Get new editor

* Save this

* Add examples

* Adjust styling

* setup custom sandpack

* Add script

* Format files

* Make sandpack plugin work

* migrate react docs

* Fix svelte and solid examples

* Migrate to solid packages

* Add darkmode package logos

* Fix bug in selector

* migrate vue examples

* migrate advanced vue items

* migrate preact and svelte examples

* Add astro docs

* adding more docs on guide for lucide library

* Fix home animation

* Cleanup

* Added resources page, with more details and content

* Add hero badge for Version 1

* Fix vercel json

* Update missing paths

* Fix build?

* Replace lucide-vue-next

* Fix build

* Add some docs

* update markdown

* Setup angular docs

* Add basic angular docs

* Adjust code examples

* Update title and descriptions

* Update accessibility link

* Update title and description

* Add og image

* Fix alignment

* Add migration guides

* Adjust version 1 markdown file

* Add migration guide to the main list

* Minor fixes

* Update docs

* Apply feedback

* Select icons

* Add pointer events none

* Fix package links homepage

* Format code

* Fix types

* Fix focus

* Fix build

* Fix focus

* Apply feedback

* Adjust imports

* Adjust imports

* Fix search

* Apply feedback

* Fix import in font docs

* Small fixes

* docs(guide): added easter egg icon. stay tuned, guys 😉

* Add llm txt plugin

* Adjust logo top

* docs(version-1): upgraded @lucide/angular guide for v1 website (#4144)

* docs(guide/angular): rewrite some angular documentation

* docs(guide/angular): extens angular guide with combining icons & icon provider guides

* docs(guide/angular): fix angular sandbox, still needs @lucide/angular release tho

* docs(guide/angular): rework the getting started page a bit more, refactor some more prop=>input occurences

* docs(guide/angular): context provider => provideLucideConfig

* Update docs/guide/angular/migration.md

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>

* Update docs/guide/angular/advanced/combining-icons.md

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>

* Apply suggestions from code review

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

* docs(guide/angular): rework a11y for better flow & pacing

* docs(guide/angular): salvage original phrase, it has better flow

* docs(guide/angular): some more a11y nitpicking

* docs(guide/angular): reduce llm fatigue

* docs(guides/angular): fix app component selector

* docs(guides/angular): fix angular sandpacks

* Add sandpack angular to improve tree-shakable stack

* Update docs/guide/angular/getting-started.md

* docs(guides/angular): fix user import in combinding icons guide

* docs(guides/angular): fix nested SVG phrasing

* Update docs/guide/angular/advanced/with-lucide-lab.md

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update docs/guide/angular/advanced/filled-icons.md

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* docs(guides/angular): fix createLucideIcon guide

* docs(guides/angular): upgrade all relevant angular sandpack demos

---------

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

* fix(docs): add autogenerated OG images to gitignore

* fix(docs): unify the case of "Lucide" & "Lucide Lab" over all docs and readmes

* Fix build

* Add next tag to all installation guides

* Add top bar notification

* Minor fixes

* Update text

* Add todos

* Update og image

* Adjust install command

* Color top bar

* fix(docs): ignore all OG images, expect general.png

* fix(docs): fix the package list, hide @lucide/icons, downgrade angular logo, link to v0 guide, fix package title alignment

* Update docs/.vitepress/theme/components/base/LayoutTop.vue

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update docs/guide/react/advanced/dynamic-icon-component.md

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update CONTRIBUTING.md

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update docs/.vitepress/sidebar/resources.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Fix code example

* fix(docs): version 1 => Version 1

* feat(docs): add angular to new features in v1

* Fix next line issue

* feat(docs): fix typo (code example_s_)

* Fix deadlink

* feat(docs): fix some more typos and irky grammar

* feat(docs): fix lowercase lucide in sidebar 😅

* Update docs/guide/version-1.md

Co-authored-by: Karsa <contact@karsa.org>

---------

Co-authored-by: Karsa <contact@karsa.org>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
2026-03-20 17:04:28 +01:00

1.2 KiB

title
title
Affinity Designer Template Guide

Affinity Designer Template Guide

This guide describes how to use the Affinity Designer template for Lucide.

General Workflow

Attention: By default, Affinity Designer sets the unit for stroke to points. Make sure that it is set to pixel. To do this, open Preferences > User Interface. Under Decimal Places for Unit Types, uncheck Show Lines in points.

  1. Download and open the Affinity Designer template.

  2. Follow the Icon Design Principles while you use the template (to ensure integrity with the Lucide icon pack).

  3. Export the file as SVG (File > Export). Make sure that Rastering is set to Nothing, Export text as curves is checked (hopefully, you won't need this), Use hex colors is checked, and Flatten transforms is checked.

    SVG export options in Affinity Designer

  4. Optimize the exported SVG file further with SVGOMG or svgo (using svgo --multipass exported_icon.svg).