is there a way to load static file like png or ttf in a custom dash component plugin package?

[pingf]

I'm writting my own dash components on top of dash & react-semantic-ui.
just find that it's hard to use the icon in dash, cause most react lib pack png files(and many others like ttf) for the icon.

[chriddyp]

Hm good question. Does the solution in #71 work for you?

[chriddyp]

Er, it wouldn't really if you're writing your own bundle. The Dash component bundles only include CSS and JS bundles (see e.g. https://github.com/plotly/dash-core-components/blob/master/dash_core_components/__init__.py#L15-L43).

We could also include a way to specify the image assets of the bundle / package as well.

[pingf]

yep, i've find that there are only two kinds of dist config(js and css) which makes hard to write components like icon on top of other react library.
for now , I'm writting my own components using react-semantic-ui, for the icon part, I have to use icons in awesome font(just include the awesome css and put the fa-xxx in the class).

[yunake]

@chriddyp are there any plans to look into this? would you accept a PR that implements it? i need to serve map files for my components and an assortment of static resources such as fonts and icons.

[chriddyp]

@yunake - I'm not planning on looking into this in the immediate future. I would accept a PR that would add this. This will likely be added to the https://github.com/plotly/dash-components-archetype repository. If possible, a little write up (in a github issue) on the general approach of how this would be accomplished would be really helpful for me and others before the PR gets submitted.

[yunake]

Great!
I was thinking of creating a mechanism similar to _css_dist/Resources(), but special-cased for directories. For the sake of clean user interface, I think it would be preferable to have user specify his static artefact directory in his __init__.py, and have us hook it into flask.send_from_directory, under a component-specific url just like current resources. The downside is that the client code now needs to know the component name to figure out which URIs to generate to reach the resources, but I think this is a reasonable requirement, since these components would be tied to Dash anyway. What do you think?
I have no idea when I will work on this, for now I have a work-around with a custom flask route that handles everything for me, but as we expand our collection of modules, we certainly want to establish clear relationships between the resources.

[yunake]

actually, since packages can be egg files and even pex, send_from_directory won't cut it - something like this might be more appropriate, with a pregenerated set of files+urls (for security) - this is what i currently use in my workaround:

from pkg_resources import resource_stream
flask.send_file(
        resource_stream(component_name, os.path.join(static_dir, resource_url)),
        attachment_filename=os.path.basename(resource_url)
    )

[nicolaskruchten]

I'm also hitting the need for something like this. I want to add static files to a component, in this case I want to add a JS file to dash_renderer that's not to be loaded via index every time.

[zeusttu]

Also hitting this issue when trying to add an icon to a search box. Since it's a component library which is only used internally by one project, I can work around it by duplicating the icon in the project's assets folder, but that's really an ugly workaround and also not feasible for everyone I think.