Đính kèm SVG vào DOM với Webpack

Question

Hiện tại công ty của tôi có một tệp SVG khá lớn chứa các biểu tượng khác nhau trong index.html của ứng dụng web AngularJS của chúng tôi. Các SVG chính được ẩn bởi CSS và chúng tôi hiển thị các biểu tượng riêng lẻ từ SVG bằng cách chọn chúng bằng ID của họ:

<svg> 
    <use xlink:href="#icon-id"></use> 
</svg> 

Chúng tôi đang cố gắng để giảm thời gian tải của trang web của chúng tôi bằng cách chia lên SVG và nội tuyến kết quả các bộ phận trên trang tha cần chúng. Vì chúng tôi cũng đang chuyển sang Webpack để gói ứng dụng của mình, chúng tôi muốn chỉ định phụ thuộc cho tệp SVG cụ thể trong mô-đun Góc và sau đó có Webpack chèn nội dung của SVG - có thể được bao bọc trong div - vào DOM . Có cách nào để đạt được điều này với trình tải hiện có không? Tôi đã tìm thấy bộ nạp liệu thô về cơ bản xuất khẩu nội dung của SVG của chúng tôi. Tuy nhiên, tôi không biết làm thế nào để chuỗi nó với một bộ tải khác mà có thể chèn vào DOM như nói rằng bộ nạp kiểu làm.

Bất kỳ trợ giúp nào được đánh giá cao.

Felix

Answer 1

Một lựa chọn khác đã đi ra từ câu hỏi này đã được hỏi: https://github.com/kisenka/svg-sprite-loader

Nó giống như phong cách-loader nhưng đối với SVG:

• Tạo một sprite SVG đơn từ một tập hợp các hình ảnh.
• Hỗ trợ hình ảnh raster (PNG, JPG và GIF).
• Hỗ trợ triển khai sprite tùy chỉnh.

Phản ứng ví dụ được cung cấp, và có một tùy chọn cấu hình cho góc:

• angularBaseWorkaround Thêm workaround cho vấn đề với sự kết hợp của và API lịch sử mà là điển hình cho Angular.js.

// some-component.jsx 
import Icon from './icon'; 
import help from './images/icons/Help.svg'; 

<Icon glyph={help} /> 

Answer 2

Tôi đã kết thúc trình tải webpack của riêng mình cho sự cố này. Bạn có thể cài đặt trình tải nội tuyến thông qua npm. Thông tin thêm có thể được tìm thấy tại https://www.npmjs.com/package/inline-loader

Answer 3

Ngoài ra bạn có thể sử dụng: https://github.com/mrsum/webpack-svgstore-plugin cho rằng

npm i webpack-svgstore-plugin --save-dev