Skip to content

Commit 1f43afc

Browse files
committed
chore: update NpmPackage assets reference
Update the npm assets referencing to match new functionality. part of vaadin/flow#22515
1 parent 036760f commit 1f43afc

File tree

1 file changed

+3
-3
lines changed

1 file changed

+3
-3
lines changed

articles/styling/advanced/npm-packages.adoc

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ public class MyComponent implements Component {
5454
[#fonts-and-images-from-npm]
5555
== Using Static Resources from npm Packages
5656

57-
The `assets` field in the [annotationname]`@NpmPackage` annotation allows you to copy assets from npm packages into the static resource folder (i.e., the `VAADIN/static` folder), allowing you to references them from Java source code and from the browser.
57+
The `assets` field in the [annotationname]`@NpmPackage` annotation allows you to copy assets from npm packages into the static resource folder, allowing you to references them from Java source code and from the browser staring the request as `assets/{npm_asset_path}`.
5858

5959
The `assets` field syntax looks like this in general: `"asset/glob/pattern:local/target/path"`. The first part defines which files from the npm package should be copied, and it can be a “glob” pattern.
6060
The second part, after the colon, defines where matching resources are copied under the resources folder. You can define multiple asset mappings for a single package annotation.
@@ -73,13 +73,13 @@ The second part, after the colon, defines where matching resources are copied un
7373
public class MyComponent implements Component {
7474
public MyComponent() {
7575
// tag::usage[]
76-
add(new Image("VAADIN/static/fontawesome/icons/snowflake.svg",
76+
add(new Image("assets/fontawesome/icons/snowflake.svg",
7777
"snowflake"));
7878
// end::usage[]
7979
}
8080
}
8181
----
8282

83-
In the previous example, the `fortawesome` file `svgs/regular/snowflake.svg` is copied to `VAADIN/static/fontawesome/icons/snowflake.svg` and can be accessed with that path in the application code and CSS stylesheets.
83+
In the previous example, the `fortawesome` file `svgs/regular/snowflake.svg` is copied to `VAADIN/static/assets/fontawesome/icons/snowflake.svg` and can be accessed with the path `assets/fontawesome/icons/snowflake.svg` in the application code and CSS stylesheets.
8484

8585
[discussion-id]`3e46fe3b-00d6-4cf7-908c-342a364210db`

0 commit comments

Comments
 (0)