Merge pull request #5376 from alphagov/royal-arms-update

Update the Royal Arms graphic in footer (v5.x)

CHANGELOG.md

@@ -4,6 +4,22 @@ For advice on how to use these release notes see [our guidance on staying up to
 
 ## Unreleased
 
+### New features
+
+#### The Royal Arms has been updated
+
+The Royal Arms in the [GOV.UK footer](https://design-system.service.gov.uk/components/footer/) has been updated to reflect the version introduced by King Charles III.
+
+You should ensure that the new image is being copied to your service's image assets folder if it's not being used directly from the Frontend package. By default this folder is located at `/assets/images`.
+
+If you’re using Nunjucks, the asset path may have been changed by the `assetPath` global variable or `assetsPath` parameter on the header component.
+
+Copy the `govuk-crest.svg` file from `/dist/assets/images` into your assets folder.
+
+You can safely delete the old image files, named `govuk-crest.png` and `govuk-crest@2x.png`.
+
+We introduced this change in [pull request #5376: Update the Royal Arms graphic in footer (v5.x)](https://github.com/alphagov/govuk-frontend/pull/5376).
+
 ### Fixes
 
 We've made fixes to GOV.UK Frontend in the following pull requests:

packages/govuk-frontend/src/govuk/components/footer/_index.scss

@@ -3,12 +3,9 @@
   $govuk-footer-border: $govuk-border-colour;
   $govuk-footer-text: $govuk-text-colour;
 
-  // Based on the govuk-crest-2x.png image dimensions.
-  $govuk-footer-crest-image-width-2x: 250px;
-  $govuk-footer-crest-image-height-2x: 204px;
-  // Half the 2x image so that it fits the regular 1x size.
-  $govuk-footer-crest-image-width: ($govuk-footer-crest-image-width-2x / 2);
-  $govuk-footer-crest-image-height: ($govuk-footer-crest-image-height-2x / 2);
+  // Royal Arms image dimensions
+  $govuk-footer-crest-image-width: 125px;
+  $govuk-footer-crest-image-height: 102px;
 
   .govuk-footer {
     @include govuk-font($size: if($govuk-new-typography-scale, 19, 16));
@@ -78,10 +75,7 @@
     display: inline-block;
     min-width: $govuk-footer-crest-image-width;
     padding-top: ($govuk-footer-crest-image-height + govuk-spacing(2));
-    background-image: govuk-image-url("govuk-crest.png");
-    @include govuk-device-pixel-ratio {
-      background-image: govuk-image-url("govuk-crest-2x.png");
-    }
+    background-image: govuk-image-url("govuk-crest.svg");
     background-repeat: no-repeat;
     background-position: 50% 0%;
     background-size: $govuk-footer-crest-image-width $govuk-footer-crest-image-height;