TIL: How to use the Inline SVG gem with Vite Ruby/Rails

Create lib/inline_svg/vite_file_loader.rb and put the following code into it

# frozen_string_literal: true

module InlineSvg
  class ViteFileLoader
    def self.named(filename)
      path = ViteRuby.instance.manifest.path_for(filename)

      return fetch_from_dev_server(path) if ViteRuby.instance.dev_server_running?

      Rails.public_path.join(path).read
    end

    def self.fetch_from_dev_server(path)
      config = ViteRuby.config

      path = "#{config.protocol}://#{config.host_with_port}#{path}"

      URI.open(path) # rubocop:disable Security/Open
    end
  end
end

This will make inline_svg get the asset from the Vite Development Server in our Development environment. Otherwise it will just source the file directly from the filesystem.

In an initializer config/initializers/inline_svg.rb put the following

# frozen_string_literal: true

require 'inline_svg/vite_file_loader'

InlineSvg.configure do |config|
  config.asset_file = InlineSvg::ViteFileLoader
end

Now put your icons into app/frontend/images and reference them with inline_svg('images/my_icon.svg').

You can of course create subfolders etc.

Enjoy!