build does not take into account folders when dealing with svg

Bug Report or Feature Request (mark with an x)

- [ X] bug report -> please search issues before submitting
- [ ] feature request

Command (mark with an x)

- [ ] new
- [ X] build
- [ X] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

Windows 10

C:\Users\Owner
λ node --version
v8.11.1

C:\Users\Owner
λ npm --version
5.3.0

C:\Users\Owner
λ ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.1.1
Node: 8.11.1
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.7.1
@angular-devkit/core         0.7.1
@angular-devkit/schematics   0.7.1
@schematics/angular          0.7.1
@schematics/update           0.7.1
rxjs                         6.2.2
typescript                   2.7.2

Repro steps

ng new bug-so
cd bug-so
npm install flag-icon-css

In angular.json, I added the CSS:

        "styles": [
          "src/styles.css",
          "node_modules/flag-icon-css/css/flag-icon.min.css"
        ],

In app.component.html

<div style="padding: 5em">
  <span class="flag-icon flag-icon-es" style="border: 1px solid black"></span><br/>
  <span class="flag-icon flag-icon-fr" style="border: 1px solid black"></span><br/>
</div>

Run the app

ng serve

The log given by the failure

N/A

Desired functionality

The spanish flag is interpreted as:

.flag-icon-es {
    background-image: url(es.svg);
}

because the size of es.svg is more than 10KB. The issue is that the library has several es.svg files. In my case this is not the one referenced by the CSS.

k:\home\projects\stable\playground\angular\experiment (master -> origin)
λ dir node_modules\flag-icon-css\flags\1x1\es.svg
 Volume in drive K is New Volume
 Volume Serial Number is 92EC-8912

 Directory of k:\home\projects\stable\playground\angular\experiment\node_modules\flag-icon-css\flags\1x1

09/06/2018  08:04 AM            12,214 es.svg
               1 File(s)         12,214 bytes
               0 Dir(s)  47,793,385,472 bytes free

k:\home\projects\stable\playground\angular\experiment (master -> origin)
λ dir node_modules\flag-icon-css\flags\4x3\es.svg
 Volume in drive K is New Volume
 Volume Serial Number is 92EC-8912

 Directory of k:\home\projects\stable\playground\angular\experiment\node_modules\flag-icon-css\flags\4x3

02/22/2018  04:19 PM           145,196 es.svg
               1 File(s)        145,196 bytes
               0 Dir(s)  47,793,385,472 bytes free

After the ng build command, the dist folder selects the first es.svg and not both.

k:\home\projects\stable\playground\angular\experiment (master -> origin)
λ dir dist\experiment\es.svg
 Volume in drive K is New Volume
 Volume Serial Number is 92EC-8912

 Directory of k:\home\projects\stable\playground\angular\experiment\dist\experiment

09/06/2018  11:14 AM            12,214 es.svg
               1 File(s)         12,214 bytes
               0 Dir(s)  47,793,385,472 bytes free

Mention any other details that might be useful

You see visually the issue at https://stackoverflow.com/questions/52192974/angular-data-urls-processing/52194037

[clydin]

You can set outputHashing to media. This was the default in the past and will prevent identically named files from overwriting each other (unless the content is identical which is actually favorable).

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}