Valkyrie 1.0

[Studio384]

Valkyrie 1.0 is a major revamp of the project. It includes an entirely reworked icon set, improvements to the React component, various naming improvements, a major reorganization in our Figma file, revamped documentation, and more changes.

Beta 1

Valkyrie 1.0 beta 1 marks a new step to a stable Valkyrie release, including an update React Component, cleaned up icons, and more.

💥 Breaking changes

• The ValkyrieIcon component has been renamed to Valkyrie.
• The CSS style now must be imported separately.

Icons

New icons

Expands our icon library from 352 icons to 352.

Updated icons

• arrow-down-to-line
• arrow-left-from-bracket
• arrow-up-right-from-square
• devices
• fanvil
• fingerprint
• message-pen
• record-stop
• safari
• signal-strong
• triangle-exclamation
• yealink

Renamed icons

Bug fixes

• Fixes various SVG exports including their icon twice.

React component

• The Valkyrie component is now fully available as CJS and ESM.
• Adds support for the bounce property.
• We no longer depend on @emotion/css.

Docs

• The changelog for alpha 1 through 57 have been combined to make migration from Valkyrie 0.21.1 to Valkyrie 1.0 beta 1 easier.

Tooling

1.0

Features

• Add ValkyrieIcon component #7 The ValkyrieIcon component is now a standalone component that no longer requires you to import custom CSS.
• Make codepoints static #49 Valkyrie now uses fixed codepoints.
• Docs revamp #51 Revamps the documentation with examples and a searchable list.
• 08e5e76 The ValkyrieIcon type is now exported as IValkyrieIcon.

Removed

• 496b10c We no longer include TTF and EOT version of Valkyrie.
• 7693fc5 Removed the Mellow icons from the repository.

Icons

General changes

• Revamp modifier icons #43 Revamp the modifier icons.
• Revamp slash icons #44 Revamp the slash icon.
• Update grid to match new guidelines #45 Rework the grid to a 16x16 format.
• Move icons to non-zero rule #46 Use the non-zero rule instead of odd-even export.
• Check and fix various inconsistencies #47 Improve consistency.

New icons

Expands our icon library from 223 icons to 330.

• align-center
• align-justify
• align-left
• align-right
• angles-x
• apple
• arrow-down-arrow-up
• arrow-down-from-cloud
• arrow-left-arrow-right
• arrow-right-from-file
• arrow-right-to-file
• arrow-up-right-from-square
• arrow-up-to-cloud
• bars-uneven
• bel
• broom
• burger-glass
• calendar-clock
• calendar-day
• calendar-range-clock
• calendar-range
• calendar-week
• car-side
• chalkboard-person
• circle-dashed
• circle-half-inner
• circle-half
• cloud-softphone
• command
• compare
• diagram
• dice-five
• dice-four
• dice-one
• dice-six
• dice-three
• dice-two
• dice
• door
• ellipsis-v
• export
• fanvil
• file-audio
• file-excel
• file-word
• file-powerpoint
• file-text
• file-zip
• flask
• folder-image
• folder-open
• folder-plus
• folder-min
• glass
• grip-dots-h
• grip-dots-v
• horizontal-line
• key
• keyboard-brightness-high
• keyboard-brightness-low
• keyboard
• life-ring
• list-checks-xmark
• magnifying-glass-min
• magnifying-glass-plus
• microphone-slash
• min
• moped
• music-pause
• next
• order-alphabetical-asc
• order-alphabetical-desc
• order-numerical-asc
• order-numerical-desc
• pager
• password
• people-xmark
• person-xmark
• phone-xmark
• plate-utils
• previous
• react
• receipt
• record-stop
• record
• rectangle-p
• share
• shopping-cart
• sidebar-left
• sidebar-right
• speaker-grill
• spinner
• subscript
• superscript
• table-cell-merge
• table-column-insert-left
• table-column-insert-right
• table-column-min
• table-header-cell
• table-header-column
• table-header-row
• table-min
• table-row-insert-bottom
• table-row-insert-top
• table-row-min
• tag-gear
• tag-plus
• teams
• thumbtack-slash
• thumbtack
• toggle-off
• toggle-on
• translate
• wallet
• windows
• yealink

Changed icons

• 14aa481 lock-open now has rounded corners on its shank.
• 14aa481 stop has slightly increased border radia.
• angles-y has been updated with a smaller size.

Redesigned icons

Various icons have been updated with new designs. Some of the more notable updates:

• Various modifier icons have been reworked, for example: a plus-modifier now appears in a circle.
• Various border radia have been updated to improve consistency.
• Slashes now go in the opposite direction and only cast a shadow to 1 side to improve the amount of detail visible.
• Circular icons have been made 1 pixel larger to improve their visual weight compared to the rest of the set.
• filter now uses a bar-design.
  • filter-plus and filter-xmark have been updated to match the new filter icon.
• table has been simplified to allow variant icons more room for their modifiers and a generally cleaner look.
• chart-pie has been updated to show an exploded pie chart.

Renamed icons

Valkyrie 1.0 renames various icons to remove the actions related to icons and put the actual contents of the icon in its name instead.

• arrow-right-ban => arrow-right-prohibited
• ban => prohibited
• clear-formatting => a-gum
• clear-node => square-gum
• ellipsis => ellipsis-h
• film => filmstrip
• horizontal-rule => line
• link => chain
• link-slash => chain-slash
• list-check => list-checks
• list-ol => list-ordered
• list-ol-clock => list-ordered-clock
• logs => files-list
• paper-plane-top => paper-plane
• phone-arrow-down-left-ban => phone-arrow-down-left-prohibited
• phone-arrow-up-right-ban => phone-arrow-up-right-prohibited
• repeat-1 => repeat-once
• smartphone-divert => smartphone-arrow-right
• unlock => lock-open
• users => people
• user => person
• user-clock => person-clock
• user-gear => person-gear
• user-headset => person-headset
• user-list => person-list
• user-lock => person-lock
• user-plus => person-plus
• volume-none => volume-slash

ValkyrieIcon

Valkyrie 1.0 introduces a number of changes for the component:

• You no longer need to import the (S)CSS included with the package, the component now includes all styling.
• a435211 You can now overwrite the spin animation speed with --vi-animation-duration.
• 762046c The icon will now play a transition and provides CSS variables to alter this transition when using rotate.
• clsx is no longer a peer dependency.
• fa5dc72 Adds the beat property and animation.
• 788c436 Adds support for pulse to the spin property.

Documentation

Valkyrie 1.0 introduces a revamped documentation site with search feature and per-icon documentation.