时间戳

首页 > 解决方案 > 带有 Webpacker 的 SVG

svg - 带有 Webpacker 的 SVG

问题描述

有没有办法从 Webpacker 将 SVG 文件内联到我的 HTML 中？

我知道我可以做到<img src="<%= asset_pack_path 'media/svg/icon.svg' %>" />，但这会输出一个引用 SVG 的图像标签。我希望 SVG 实际上在代码中，这样我就可以用我的样式来设置它的样式。

尼尔

标签： svgwebpacker

解决方案

在同样的事情之后，在 rails 中构建了一个简单的助手来为我加载 svg。

1. 将此添加到您的助手文件夹：

helpers/svg_helper.svg

module SvgHelper
  def show_svg(path)
    File.open("app/assets/images/#{path}", "rb") do |file|
      raw file.read
    end
  end
end

在我的情况下，我在 image 文件夹下有我的 svg，但你可以将它放在 assets 中的任何位置。

2.然后从你的角度调用它。

<%= show_svg('icons/icon-menu.svg') %>

希望这可以帮助！

推荐阅读